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对《深入浅出 Web 设计》的赞誉 

“建立网站已经变得不是撰写代码而已^《深入浅出 Web 设计》呈现了如何为用户带來客悦满:音： 

的体验，呈现需要知道的一切。这是 4 Head First P 系列的又一好书！” 


Sarah CoIIings t 用户体验软件工程师 


简洁，但绝非过度简化。实用，而又 直观。 其希望在我踏入这行时，能右到类似这样的书籍。 

- Matt DiGangi, Matt DiGangU 现实生活中的 Web 设计师 


“ （《深 人浅出 Web 设计》邦的消除了 Web 设计过程的神秘因素，让任何 Web 程序员都能动手试试。 
对于没有接受过 Web 设计课程的网站开发人员，《深入浅出计》 证实了 许多理论，井 澄淸许 
多似乎只适业界假设的最佳灾践 & " 


Ashley Doughty, 资深 Web 开发师 


“开发人员终 T ■能够全盘理解‘好’网站的輅套建设过程 & 我们终于在 Web 设计 必要准则的领域看 
到一本必需而且让人想拥有的书& ” 


Johannes de Jong, Web 程序设计师 


“ 4 Head First 1 系列的学习技巧非常有效。我们感觉像苏的走了一遍设计过程，而不是在读一 
本‘済你跟我这样做’的手册。这是更佥面的学习方式。本书配合我们的大脑运作方式，而不是 
与之对抗。” 


Jonathan Moore，Forerunner Design 的老板 



O'Reilly Media ， Inc . 介绍 


CTReilly Media , Inc . 是世界上在 UNIX 、 X 、 Internet 和其他开放系统图书领域具有 
领导地位的出版公司，同时是联机出版的先铢 3 

从最畅销的 《The Whole Internet User^s Guide & Catalog )) (被纽约公共图书馆评为 
二十世纪最重要的50本书之 一> 到 GNN (最早的 Imemet 门户和商业网站），再到 
WebSite (第一个桌面 PC 的 Web 服务器软件）， O'Reilly Media , Inc . —直处子 Internet 

发展的琨前沿。 

I 午多书店的反馈表明， O'Reilly Media , he . 是最稳定的计算机图书出版商——每一 
本书都一版再版。与大多数计算机图书出版商相比 ， CTReiUy Media ， Inc . 具有深厚 
的计算机专业背费，这使得 O’Reiiiy Media , Inc . 形成了_个非常不同于其他出版商 
的出版方针。 O'Reilly Media , Inc ， 所布的编辑人员以前都是程序员，或者是顶尖级 
的技术专家 。 O Reilly Media , Inc. 还有许多固定的作者群体^—他们本身是相关领 
域的技术专家、咨询专家，而现在编写著作 ， OWeniy Media , Inc . 依靠他们及时地 
推出图书。因为 Oieilly Media , he . 紧密地与计算机业界联系着，所以 OWdlly 
Media , Inc . 知道市场上真正锯要什么图书。 
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爱并感谢我的家庭- leran , Taylor、Sam (还有 Oscar 与 Persia ) 。 

—— Ethan 


给母亲——帮助我了解自己的梦想，并鼓励我追求自己的梦想。如 
果没有你，就不会有这本书。 

— Jeff 






作者 


深出浅出 Web 设计 的作者 





Ethan Watralt 是密駄根州立大学 Matrix: The Center 
for Humane Arts, Letters & Social Sciences Online 的 
助理教授， Telecommunication, Information Studies, 
and Media 系的助理教授 , 以及历史系的*仟肋瑚 
教授 。 W 外， Ethanidi/iGames for Entenainment & 
Learning 次 : 验室的前席研究员，足密歇根州立大学本 
科电的 Specialization and Game Design 系和研究生的 
Serious Game Design 系的创办 人之％ Ethan 教学的范 
围很广，包括文化遗产信息学、以用户为中心的及用 
户体验设计、严南游戏设 i 卜 (serious game design ,不 

适纯娱东的游戏）、游戏研究，还夼古埃及社会史与 
迚筑。除了发衷各式各样的学术论文与研讨会简报外， 
Ethan 还写广很多关干交迓式设计与 Web 设 II■ 的书鍩。 

当 Ethan 不在专业领域里耕転时，他是个世界级的涅 
_ 达人 （ Kilowog 是他最离爱的 Green Lantern 系列角 
色），沉迷于科幻小说（到坟菘里都坚持 1^ 1 8^1 ^才 
是最奸的 Doctor ) ,也总热衷投人各种游戏的玩家 
( 包括数字 游戏， 閔版游戏及必上游戏）。 Ethan 的数 
字分身町以在 ww 、 v,captainprimate*«>m ^www.twittcr, 

coiii/captain^primatetJc^J ^ 





Jeff Si art o 是刚从密歇根州立大学研究所毕业的 
新人-研究课题是用户体验与 Web 设计。 Jeff 是名 
堪干标准的 Web 设计运动的学牛 一一 想耍成为像 
Cederholm v Zeldman , Meyer — 样的人，并在他就谈 
大学的期间， 一 直从事网站开发， i : 到于研究所第二 
年签下((深人浅出 Web 设计》的共同创作合约为 it % 
除了徙设网站，他还致力干通过简取、可用的设计来 
改蕃在线课程和开放教学。 Jeff 目前在芝加哥安家， 
自由承接网站开发的 C 作，也是兼差的 Iron Chef 挑 
战者。当 Jeff 不工作时，他甚欢烹饪与吃(大部分是 
吃），也为 A 己的博客 w \ vw 』 iarto . com 东修函改。 

通过 Jeff 的 Twitter feed (wwmtwitterxom/jsiarto) t 

读者可以 f 解他的动态，如果有人离的很闲,也可以 
发电 户邮 件给他： jeff@siarto.com 。 
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如何使阁本书 
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本聋©爸 3 热 0 诒蛀： _ 

-^{ j 么銮把这 咎糸® 放逬 w 鉍设 分的半 踔罜? 
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如何使用本书 


淮适含锿这本书？ 

如果对于下列问题，你都回答 “是”： 

0 你是否已经熟悉 XHTML 与 CSS . 但没有任何 Web 设计经验？ 

Q 你是否认为自己是网站开发师（在好玩的环境如 PHP、Ruby on 
Rails. .NET 中工作），而且想成为 更好的 Web 设计师？ 

0 你是否因某 些课程 v 工作职责而需要了解 Web 设计， 或只是想在 
晚宴上让大家倾倒于你对黄金比例与 Web 内容可访问性方针的深 
厚了解？ 

那么这本书正是为你而写。 

谁或许应该远离这本书？ 

如泶对于下列问题，你都回答 " 是' • 

H 你是 否对于 HTML/XHTML 与 CSS 没有任何经验？ 

0 你是位 老练的 Web 或图像设计师，正在寻找参考书 
吗？ 

& 你是否甚欢用 Frontpage 与 Dreamweaver 建立网页， 

因为不用理解代码？ 

那么这本书不太适 合你。 

本抑钟布信用 



先铒露 《Head Fim HTML 
mth CSS Si XHTML 》， 作老 

甚 Eti 如 6ecii Zeeman ^ ^ic 

fieeman w 然后馬卷本韦。 


xxir 序 
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我们知 € 你在想什么。 


"这怎么可能是一本严肃的程序设计书鍩? 


“这一堆阁是千吗的? 



那么，对 T 柿天都要面对的一成不变，平淡无奇的事物，你的脑袋又 
作何反应？它会尽最阻止这些祺悄干扰大脑的真正工作——记录苒正 
_ T (嬰的事。大脑不会浪费脑细胞去储存无聊的事，它们绝对无法通 
过“这显然不朮要”的过滤器。 

你的脑袋究竞怎样知道什么逛笟耍的事？假设你去郊游，突然存只老 
虎跳到你的眼前，你的脑袋和身体会怎样反应？ 

神经紧绷^怙绪激动、肾上腺尜激增。 

那就是脑袋“知道”的方式…… 

这绝对重要！别忘了！ 

但是，想象你 在家祖或亂 |5馆，这里安全、温暖而且没袍 
老虎出没。你正在谈书准缶考试或者研究某个技术一你的 
老板认为你圾多花 7 至 10 天就能完成的难题。 






但是 符个 问题。你的肭袋正试荇帮你，它试若确保这件显然不贵 
要的事不会占用布限的资 源。 毕竞，资源锻好用来储存與正的 
大事，如老虎、火灾，或是 代天 堂游戏“魂斗罗”的作弊 Ei ( 1 
T J 丨 一一一 一 f 3 A > a 而且也没苻简里的方法可以告诉你的脑 
袋：“脑袋呀！ 我朴: 常感谢你，不苻这本卞多枯燥、我的倩绪波 
动频率 W 多低，还是请你把这些内容全都记 F 來吧 。” 


“这样與能 it 我学到东因吗？” 

我们也知 m 你的脑袋在想仔么 


你的 M 袋说嘻新夼的事物，它总是在搜寻、扫描及等待■常的車物。人 
类的大脑屯来如此，正是这样的特质帮助你常保活力。 


^ir 
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如何使用本书 


我们将 “ HeadFirst ” 的锿者视为 

d . -Fu. fc » * ■ - § fX *_ — 


o 






■ ■■"-■ 

毽 


jag? p l 1 I n-TT i*vv*，* ■ ” ▼- — 

h 奮純师祕不会就它。柳不細鹏的 
那么，该怎么学教齊心理学最_研究，学习过程所需耍的 
右式对待你 * 根据认知科予、 神经 生物: Ur 

=不只颜而上的文字。我们知道如何她 ; _ - 

Head First 学习守则： 

〒::=^::__式._ 
使用对话方式与拟人化风格： # 员课后测险成绩的提升可达 4 ㈣ 。以 

U 纏_能■你的注意力？ 


feMMtffJ *. 榇并的 
±#^@*塒子 箝时舁 
弒和榑*«分*钺 ». 


Q 


Q 


阳 afk 在狂*时 




E 3 


故屯代#论述，以轻松的口语取代化式咖抖… ㈣ 、 

== 脈_脈能娜的注細 

让学习拽 m 轉。_ 
给，不然大_不鋪所作为。读者必 n 激，$ 

羚与产生奸奇心并自发去解决问题，得出 ^ 化 ，4 

;成新知识。为达此 目的， 你需 ff 二 ： S 
题、以问臟雜考、娜 1动活肤右_餘多- 

的感知 




' Ji ' r ： ^ I 

fan H ^ htlSf * 


J U?f 刊届。 

卞徒 若隹料 It 力細肺这獅雛 ： 減陳思学 

3 JS : 獅没 M -页就已瞻欲晡 :; S 

描、怪+异、引人注說及超乎， 

得无聊，你的大脑就会学掛很多。 

拨动他们的心弦。现在，我们減的能 

决于情感。你会记得你在乎的办 ， ]'： % m 
件钟八护住我不足在说小狗和小屯人小 L 、心灵 ¥ , 

m mu 而 k 在说麵开亂学会别=得，= 

n , 或餘现时比⑽細 触讎 
惊讶.好奇'機.“我奸棒！这类的 W 一 u 。 


4 紅展浓 A 考在 fi 


m 


jtm 
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泛仏知：懇一想如何恩考（译注 u 

如果你真的想学习，恕学得更快、更深入，那么 * 清注意自己如何集中注 
意力，想想如何思考.学学如何学习。 

大多数人在成长过程中没存修过元认知或学习理论的课程，我们希绍学 
习，却又不知逍如何学习。 




那么，如何让大脑将 Web 设计视为一只饥饿的 
大老虎？ 


如果你正举符这本书.我们假设你想学习如何打造极友好的交互式网站， 
ifri R. 可能不想花费太多时间0如果你存意使用刚从书中学到的知识，你必 
须 i 己住读过的东两 u 在记住前，你必须先理解它。想耍从本书（或任何书 
与学习经验）得到极多的利益，济为你的 大脑负 责， i 上你的大脑好好 

注意这些内容。 


秘决在干让大脑认为你正在学习的新知识确实很苽要，与你的曳死 
存亡存关，就像噬人的老虎一样9否则，你就会不断陷人苦战，老楚 

记不住新知 H 


有抛且繁琐的方法，也有快 J 1 苻效的方法。悛的方法就赴多谈儿次。你很洁 
楚，勒能补拙，再乏味的知识也能学会并记住6只要重复的次数够多，你的太脳会 
觉得：“虽然感觉起來不怎么： t 要，但他却 一而洱 再而二地苗读这个部分，所以我 
想这应该是重要的吧！” 

较快的方法则是做任何增加大脑活动的事，特别是不同类型的大脑活动 a 上一页出 
现的东_就是解法的一大部分，已经证实有助于大脑运作。比方说，研究显示把文 
宇放在它所描述的阁像内（而不是置于苽面内其他地方，如图像说明或正文），有 
助干大脑 + 尝试将两者关联起來，这会触发更多的神经元。更多的神经元被触发就等 
同千让大 脑彳 『史多机会将此内容视为值得注意的信息并 LL 记隶卜来 。 

对话式风格也很有帮助，囵为在意识到自己身处对话中时，人们会付出更多的关 沈， 

因为他们必须竖起邛朵，注盘粮个对话的进行 * 跟上双方的谈话内容。神奇的是， 

你的大脑根本不在乎那是你与书本间的“对话 ” ！另一方面，如來骂作风格既正式 
又枯燥 * 你的大脑会以为正在昤听一场溃讲，自己只是一个被动的听众，根本不需 

要保持 ii ’ ilM 。 译注上元认知 ( Mctacogaition ) ^教 w 心现学料』名亂管 a [学>1和 

然而*图像与对话式风格 R 不过是一个开端。 认知的过程，增加学习的效果 。 


目前位罝> 
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如何使用本书 


这是我们的 傲法: 


我们使用图像，因为你的大脑对视觉化效果比较有感觉，而非文字。对大脑而言，一图值 
千字 t 当文字和_像一起使用时，我们将文字嵌人图像内，因为 你的 大脑在文宇位子它所 
涉及的图像内时（而不是图像说明或者埋没在正文的某处）会运 作得更 有效率 D 

我们 M 复表现相同内容，以不同的表现方式 . 不同的媒介、多 ffl 的感知一再叙述相同的 
事物，这是为 r 增加机会，将该内容烙印在大脑的不同[^:域。 



我们以超乎预期的方式使用 m 念和图像，因为大脑遇到新鲜有趣的事，波长才会与之间 
调。我们使用的图像与概念或多或少具有情绪内容，也是因匁大脑会关注情绪带来的生 
物化学反应。让你存感觉的事物自然就比较容易记住，即使那些感觉不外乎幽默、惊 
讶、有趣等。 

我们使用拟人化、对话式的风格，因为当大脑相信你正处干对话中而不是波动地聆听演说 
时会给予更多关注，即使你的交谈对象是一本书即使你在阅读，大脑还是会这么做。 



我们包含了80个以上的练习活动，因为当你在做审倍而不是在谈事愦时，大脑会学得更 
多，记得更多。我们让习题维持在具冇挑战性但又可以完成的程度，因为大多数 
人喜欢挑战后的成就感。 



我们使用多种教学风格，有些人可能比较喜欢按部就班，有 些人则 喜欢先了解整体轮 
廊，还有些人则喜欢蓝接看程序代码范例。 然而， 不管你是哪一类学习风格，都能够受益 
干本书以不同方式丧现相冋内容的手法。 


mm 


本凇的设计同时考虑了你的左脑与右脑，因为越多脑细胞鍪与，就越有可能学会并记住， 
而且保持更长时间的专注。因为使用一边大脑，往往意味若另一边大脑有机会休息，你便 
可以学得更久1更有效率。 



麽笔上路 


我们也会运用故事和练习呈现多重观点，因为当大脑被迫进行评估与判断时会学习得更为 


深人^ 

吶中 也有相当多的挑战和练习，通过问问题的方式进行，答案不见得都很 苋接。 我们的 
用意是让大脑深涉其中，学得更多、记得更牢，想想看，你无法只是卷人们在健身房运 
动，就能让自己实现塑身的效果。但是 t 我们尽力确保你的努力是用在正确的事情上。你 
不会花费额外的脑力去处理难以理解的范例，或是难以解析、充满行话、咬文嚼宇的论 
述， 

我们还会使用人物。在故事、图像与范例中，处处都是人物。固为你也是人.你的大脑对 
人会 比对來 物更加注意。 
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驯服大胎的方法 


好吧，该做的我们都做了，剩下的就靠你了。这 II 介绍一些技 
巧，但只是一个开端，你应该听从你的大脑，看看哪些对你的大 
脑有效，哪些无效。试试看吧！ 


(S 您钱棼下 , 
在沐箱 Si 。 


用 HeHo Kitty 磁後錄 


jTF 


0 慢慢来，理解越多，需要强记的就越少。 

不要光读 & 睜下来，好好思考。当本书问你问题 
时，不要完全不思考就直接看答案。想象有人正 
面对而问你这个问题，如染能够迫使你的大脑思 
考得更深入，你就有机会学会并记得更多的知 UL 

o 勤做练习，写下心得0 

我们在书中安排了习题，如果你光卷不做，就好 
像只是躺在床丄卷若別人努力做着塑身运动却怎 
么也不动一样，这样你是瘦不 K 来的。使用铅笔 
作答 0 大贵证据显示，学习中的实质活动可提高 
学习的 效果。 

0 认真阅读“没有蠢问题”单元 

详细阅读所存的“没荷諉问题 " 。这可不是无关 
紧要的说明，而是梭心内容的一部分，千万别略 
过！ 

0 将阅读本书作为睡前最后一件事，或者至少当作 

睡前最后一件具有挑战性的事。 

学习的一部分反应发生在放下书本之后，特别逛把 
知识转化为苌期记忆的过程更是如此。你的大脑需 
要 自己的 时间进行更多的处理。如果在处理期间塞 
进其他新知识，某些刚学过的东商将会被遗漏。 

O 谈论它，大声谈论它。 

说话会驱动大脑的不冋部位。如果你需要理解某项 
事物或试图加强 B 忆，谘大声说出来。大声解释给 
别人听，效染更佳你会学得 E 快，甚至触发许多 
新想法，光凭阅读无法布这样的效果。 

译注 2 : 扳学 报侔指出，大贴的 80 %由水纵成。 


O 喝水，多唱水 

你的大脑需要浸泡在充沛的液体 （译注 2) 内 
才能运作良好，脱水（往往发也在感觉口渴 
前）会减绂认知功能。 

O 倾听大脑的声音。 

注意你的大脑是否超负荷，如果你发现自己开 
始漫不经心或者过自即忘，那就是应该休息了， 
当你错过其些进点时，请放慢脚步，否则将失 
去更多^ 

Q 用心感受！ 

必须让大脑知道这一切都很 1T (要。你可以让自 
己融人故♦里，为照片加上自己的说明，即使 
抱怨笑话太不好笑，都比寇无感觉好，任何感 
觉对学习效果都有帮助 & 

O 动手设计网站吧！ 

想成为经验老道的 Web 设计师只有一种方法：设 
计并建立网站。当前，这或许是指在纸上画出布 
局，为了开发信息架构而做卡片分类，或是编写 
许多 css fi 重点是，如采你只是读，你就永远无 
法成为优秀的 Web 设计师——你■耍动手做 & 我 
们将提供许多 练习：海一 車都冇习题，可能是丢 
出问题让你解决或是提出諧要你思考的问题 6 不 
要跳过习题——你在解决难题时也引发大蛩学习 
行为，我们为每个习题提供了解答，如 果被问 题 
难住了，稍微瞄一下解答也没有关系，但猜尽:歐 
在解决问题之后再看解答。另外，-定要让习题 
中设计的东西可以运作后再翻到下一页。 
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如何使用本书 


ii 我 

这是一段学习经验，而不是一本参考用书。所有阻碍学习的东西，我们都会刻意排 
除。第一次阅读时你必须从头开始，因为本书对读者的知识背景做了一些假设。 


我们从讲述 Web 设计领域中最重要的概念一 ia 计过程开始，然后移往更 
为专门的设计主题。 

设计过程是开发美观网站的基础。每一步都带你朝着更好的网页接近，在前进的过程 
中，我们会创建出从视觉隐喻到网站内容地图等网站所需的一切事物，一旦你理解了 
整体设计过程，你就可以深人细节并开始建立美好的网站。 


我们推荐与标准相容的 XHTML & CSS 。 

你在研读本书的过程中写出的所有代码都与标准相容这对我们而言真的很 
重要，而且我们（坚 定） 认为，了解如何思考并能写出与标准相容的 XHTML 
(XHTML KO Strict ) 与 CSS (CSS 2.1) 代码是天才 Web 设计师的标志。布局不需要 
表格 * 内容标记中没有样式信悤，所有 < p > 也都有合适的结尾 标签。 

本书用到的所有代码都能从 Head First 网站上取得„ 

本书的大多数项目都需要你从网站下载特定章节所需的代码。事实上，你应该在一开 
姶就下栽所有代码，需耍时自然垂手可得。有时我们会要求你修改已经存在的代码 * 
也将提供“修改前”与“修改后"的标记与样式表。 


并未宪整解释每一段代码。 

我们假设你已经有可以让 XHTML 与 CSS 运作的知识，因此不会解释每一段代码的 
细节。我们会讲解 m 点的代码，下载范例里也做了详细说明 a 请记住，我们的目标是 
让各位成为更优秀的设计师，而不是从头到尾彻底检査 XHTML 与 CSS , 
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术语“构图” （ comp) 与“分镜” (storyboard) 可以互换 使用， 

我们在本书中引人了绘制分镜表的过程作为快速建造设计概念模型而不用付出大 : t 
代码的方法。我们有时以“分镜”称呼这个步骤，但有时会以“构图”表示同一件 
事。 


我们假设你使用了常见的浏览器9 

当我们往测试代码是否具有跨平台兼容性时，你应该使用时下常见的浏览器 
( IE 7 或以上、 Safari , Firefox ) 组建本书中提到的网站。虽然旧版的浏览器（特 

别是 IE 6 或更早版本）也能运作，但制作结染可能不太一样，因为这些旧浏览器有 
缺陷而且挑剔 & 


不要略过任何活动。 

练习与活动并非附加的装 饰品， 而是本书核心内容的一部分，有些可以帮助记忆， 
有些可以帮助理解，有些还可以帮助应用。所以，请不要略过这些练习 4 


重复是刻意且必要的。 

我们冀望 “Head First ” 系列能让你 S 正学到东西，希 M 你在读完此书后能够记住 
所读过的内容。大部分参考用书的目标并不将此当作一个目标。本书的重点是学 
习，所以某些重要内容会一再出现以加深你的印象 。 


我们的标记与 CSS 范例尽量精简。 

我们的谈啬告诉我们，不希望看到书中列出200行的程序代码，而当中与主题有关 
的关键代码却只有两行。本书尽量把程序代码縮短，让学习的过程淸晰简单。不要 
期待所有的程序代码都很可錤或很完整，毕竞它们仅作为辅助学习之用，不见得一 
定是功能完整的 u 

我们把文件（标紀、 CSS 、 图像.完整 网页} 放在网站上，你可以把它们复制并粘 
贴到你的文本/标记/代码编辑器里。下载请至： 


http : //wwwJi eadjirsilabs .comfbooksfhjyvdl 
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技术审阗 锣队 




Johannes de 


M&tt 


As/iiej Oi > iigfi£y 






Jonathan Mooif 


Cotej McCone 


F4H//ne McNamufl 


技术 审阅: 


Sarah Collings 已存超过 7 年的 Web 设 i 十与开发的工 
作经验， P 前是 Digital River 公司的用户体验软件工 
程师， IH 在开发 W 用性网路应用 程序。 她相[存平面设 
L 十艺术学 士子位 ，目前正在攻谈软件1:程硕士学位。 
闷暇 时候, Sarah 肖爱跑步,喜欢与未婚夫一同单受 
户外活动^ 

Johannes de Jong 是位出身大型主机界的老骨头， 

m 與千跨界尝试新办物一 " 边立网站 a 最近的一次体 
验是用 Oracle 的 Apex 纽立一个使用 Google Map 的 
网站 . 他将利用本书觅新设计那个网站。 

Matt DiGangi 是 Thieves Jargon (www.thievesjargon, 

com) 的创姶者、设计师及网站编辑。他居住在波士 
顿 。 


Ashley Doughty 逛位来应缅因州的资深网姑开发 
师， X 作地与居住地都避大波士顿地区。她是虔诚的 
迠督徙、好老婆、好女儿、好读若及 GEEI ^ 她太喜 
欢设计程序了，驻至连空闲时间都用来写程序。 

Corey McGlone 涉足 Web 开发 d 经起过1 0年， 
肢近 7年的主要工〖乍是为 S c h II i e d e r Logistics . 
Relion Corporation 与 Mayo Clinic 开发网络应用程 
他是名热切的音乐爱好若，已婚 0. W 有一子。 

Pauline McNamara 过去的6年都花瑞士参与大学 
e-Learning (数字学习）项目，大部分时间待在瑞士 

联邦理工学院苏黎做•分校 6 她田前热衷干与问居人共 
同抚养一 n 可爱的小狗 g 

Jonathan M o o r e 是 W e b 设 i 十与开发公司 
Forerunner Design ( forerunnerdesign . com ) 的老板 0 
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致谢 

给我们的编辑： 

我们要超级感谢 Brett McLaughlin. 里然他还耍管理其他书籍， 
有着像小山一般的工作，但他提供的反馈意见与建议让这本书 
史 敏说、 更顺畅，使本书成为一个更有效串的学习工具。 



McUu$htin 



还要好好感谢 Lou Ban% 她接过我们觉辟已经很棒的草节后，并使它们罚 
起乘秸美得不可思议（而且比很棒更棒）一-我们离的非常感谢你， 





给 Ethan 的亲朋好友 : 


给 O ’ Reilly 小组: 

感谢 Sanders Kleinfeld, Caitrin McCullough, Karen Shaner. 他们使得 

本书生产过程中的各阶段得以顺利运行。 

感谢 Brittany Smith ， 本书的制作编辑，她确保本书何时进入生产过程， 
保持一切运作得顺畅且有效率 & 1 

圾后感谢 Laurie Petrycki , 她相信我们的能力与眼光，才让我们有机会写 
出这本书。 


酋先贽感谢我的妻子 Jen n ， 她忍受我投入大量的时间来写这本书 （挪 走与她相处的时间）以 
及与中〕过程中的坏脾气，给她茶人的各号吧 .1 给我的儿子 S a m ,他（在我写书的）某天问我： 
“爸爸’你什么时候会停下 X 作陪我玩呢？” Sam, 朽写完了，我们来玩吧！给我的女儿 Taylor, 她本人可 
能不佘承认但应该觉得自己的名字（和照片）出现在书上会很酷。接下来要感谢 MATRIX 的同事（特别感 
谢 MarkKombluh 与 DeanRehbergerO 的支持（尤其榇近本书结案 v 圾为水深火热时 h 感谢我的研究1 

Joe 、 Pete 与 Steen ， 他们苺天早上（特别是快结案时）都会跑到我的办公室来关心书的进度。最后感谢的 
是我的棕色拉布拉多^■不为什么，就是想讲一下。 & 

给 Jeff 的亲朋好友： 

感谢 ANie ， 她儿个月來都要忍受我工作到半夜三更。迅有， 你的 InDesign 使用技巧对于本-卞;;的生产非常 
重要，少了这些技巧 * 本书的所有图像都会自动伸展变彫还会存马赛克。感谢我的妈妈 j ⑴、爸爸 j e ff 、 弟 
弟 Jason , 你们是我最大的动力来源，我很爱你们。感谢 Rich 、 Brian . Rabbott ( Ryan ) 与 MSU 的 Com 
municationArts and Sciences Dean 办公室的所有人，你们给了我机会，让我在 Michigan 最棒的 IT 办公室 

工作，而旦允许我自由开发写作这本书所需的技能。我永远都感谢你们为我指引的旅途，如果没有各位的支 
持，我就没办法写出这本书 & 


XXXI 


目前位置 ► 








©彔 （精褰 fi 反) 


目录 


序 

1 美丑都是用户的观感 s 建立美观网页 

2 纸上策略：前期制作 

3 “在绿色水塔那边左转* …- " : 组织网站 

4 遵循黄金法则：布局与设计 

5 走出单色的 世界： 运用色彩设计 

6 “在两秒内，按下‘首页’。”：智惹导航 

7 是的，你在枳 读！： 网站写作 

8 不可访问，致命 缺陷： 可访问性 

9 和谐设计之道：倾听用户的心声 

10 保持网站 新鮮： 会演变的设 i 十 

11 注意自己的工作： Web 设计这一行 
r 附录： 遗珠之憾 


XXI 

1 

37 

69 

109 

159 

193 

227 

275 

319 

369 

403 

439 


© 彔（祥实版) 


序 


把你的大脑放到 Web 设计上。 各位想在这里学习一些东西，各位的 
大脑却在帮你，让你记不住所学的东西。你的大脑在想1 “我最好为更 1R 
要的琪情保留空间，例如，该避开什么酐生动物以及裸身玩滑雪板是否是 
坏主意我们该如何哄骗大脑，让它觉得了解 Web 设计关系到生死存亡？ 

谁适合读这本书？ xxii 


我们知道你在想什么。 
元认知 

驯服大脑的方法 


，¥饗 
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xxvii 
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建5奚艰网页 
美丑都是用户的观感 


这是个非常庞大的世界……但世界上到底有哪些人？你的墙上挂 


着闪亮的 XHTML 与 CSS 证书，期待中的客户來电让公务专线响个不停 t 进 
展不错！直到你接到第一通关于版面编排太差，或是关于 logo 其过时的投诉 
电话，头痛就开始了。究竟该如何创建美轮美奂的网站，而且能够让用户满 
意？ 一切都要从良好的规划开始。然后还需要为 Web 编码、熟悉你的受众, 
还有最重要的一点，确定你是为了用户而设计，不是为自己而设计。 





与 Red Lantern Design 合作的大好机会 2 

从何着手 5 

画出蓝图是第一要务 7 

决定顶层导肮系统 13 

考萤周围环境 )5 

基础设计草图馈 Jf ane 过目 16 

草图专注于功能性 17 



别用粞糕的文案毁了好设计 

28 

什么使得文本具备可扫读性？ 

29 

Web 设计的 ® 点是沟通，以及你的用户 

35 
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布爲鸟设 i 十 

遵循黄金法则 

如果当个好的倾听者，而且随身携带计算器的话……总会有回报的。 

我们已经多次提到以用户为中心的设计，但现在才是真的考验你的倾听技巧。本 
竞，你将收到用户的反馈意见并建立一个符合用户需承的网站。从浏览器到屏幕 
实际使用面积，都是为了把用户興正耑要的东西带绐他们 t 不仅如此，你还将学 
到三分法的秘密。你会发现简单地按儿下计算器、标尺以及利用 一些网 格，就可 


把一个架之生厌的网页变成优美的事物。 
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设计是为受众服务 no 

最新 任务： RPM Records 113 

以角色瞄准 RPM Music 的受众 H4 

li : 角色引导你…… 120 

分辨率影响设计与布局 122 

辟嵇实际使用而积决定了网站在用户的浏览器中显示多少 124 
为 1024x768 建立基础 XHTML 与 CSS 优化 128 

人们有■欢井井有条与组织良好 132 

网格应该多宽？请用黄金比例 133 

三分法：黄金比例的简易版 [34 

RPM Music 与黄金 比例： （反而）案例研究 135 

诬 i 己得角色和客户吗？ 139 

以 Blueprint 框架设罝 RPM Music 2.0 14 [ 

使用 Blueprint CSS 规则为 RPM Music 2,0 添加样式 144 

放上你的 RPM Music 唱片 145 

加上-■些淸理布局的 CSS 149 

完成内容与导肮的标记工作 151 

以更多 CSS 加人布局及编排细节 154 


xi 
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运用色彩设 i + 

走出单色的世界 

色彩是 Web 设计时的无名英雄 。 -个好的调色板可以吸引受众进人你的 
网站，给予冼礼般的强烈冲由，而且让他们还想再阅来。当提到色彩与 Web 设计 
时，不仅仅适挑选好看的调色板而已，还关系到如何运用这吟色彩 6 你可能选了 
不错的调色板，但如果使用不慎，大家仍会唯恐避之不及。谈完本盘，各位将不 
仅能熟悉色彩对网站用户的影响，还将学到选择芜观的调&板乱适用千（战至能 


补充）你的以用户为中心设计的网站。 



帮忙支持本地昔乐活动 
9mles s 博客网络首选 
选择很有限 
色彩 JVfi* 怙绪彩响力 
色轮（一切的开姶） 

使用色轮选择 M 互动良好”的色彩 
首先，选抒你的基色 
以三色方案创建实用调色扳 
开始为 SampleRate 加上标记 
使用 CSS 创趙基本网页布局 
沉通的反义词是……明亮 
使用四色方案创达更丰宫的调色板 
让我们更新 SampleRate 的 CSS 
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智慧导航 

“在两秒内，按下‘首页’。” 

没有导航，网站将变成什么？ 导肮系统使得糾站成为强大的佶息媒体 e 但 
冇个问题：导肮远不仅仅是制作出一些外表酷炫的按钮.然后把它们用力贴到设 
计图上。智 M 导肮系统的逑立应该从信息架构开始，并贯穿于整个设 It 过程中， 
但导航系统如何运作？如何确保用户不会迷路？本章中.我彳门 将探讨 不同#航风 
格，了解 IA 如何引导网页链接，以及为何图标（本身）不仅仅是图标。 



学校即将开学 

194 

良好异肮的第一步是良好的 IA 

197 

名称 M 到底有什么魔力？ 

(98 

!号处理方案；水平分页导航 
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2号处理方案：垂直导肮 

206 

块元索是我们的好朋友 

212 

浮动 CNM 网站的块导肮 

213 

图标无法表达任何意义……只是好看而已 

215 

为文字配 h 图标 • 而不是为图标文字 

217 

更新 CNM 的 XHTML 以使用文字链接 

218 

现在可为新的块元尜加上样式…… 

219 

主异 航不应 改变……但次级导航应该变化 

221 

圮个子贞而都苻内己的次级导航 

222 

用 CSS 加上导航的样式 

223 
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站写作 


你在扫读! 


为网站写作和其他写作一样，对吗？ 事实上 * 为网站写作与为印刷 
媒体写作完全不同 & 大家阅读网站上的文字时，并不像阅读印刷媒体，我们 


不再从左而右、由上而下阅读，而是采用扫读 （ scan ) 的方式。网站上所有文 
字必须可被用户快速扫读并容易 理解。 如果不能这样，用户不会浪费时间努 
力读你的网站，他们将直接前往其他地方。本萌中，我们将学到许多写出可 
扫读文字的決窍，以及如何把现有文章改写成易读版本。 
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打造更好的在 线新闻 

Hipster Intelligencer Online ： 项自规格 

问题在干文字 
改善内容的倒金宇塔法 
压缩文桊 

在 XHTML 里加人列表 
标题让文章更可扫读 
混合使用字体来强调标题与其他文字 
标题的重要性以层次而非尺寸表示 
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可诂问性 

不可访问，致命缺陷 

关于体验网站的对象，目前是否有人被遗忘了？ 各位的网站或许美观 

大方、布局良好、导航轻松……但不代表毎个人都满意了。无论对视障人士还 
是 W 蓝绿色弱的人，你的网站都必须是可访问的。否则，各位将流失用户，并 
影响你的事业。但是也別太担心；可访问性并不难！通过规划标记的顺序，使 
用 ALTM 性与 LONGDESC 标签，并考虑色彩的问题，各位将可立即扩展受众的 
数量。在通往可访问性的路上，你可能还会拿到 WCAG 认证！这是什么？翻开 
后续内容 t 你就会知道了…… 




Audio -2- Go ： 布障碍的可访问性 
可访问性是指毎个人都能使用你的网站 
你的网站读起来是什么样子？ 

网站的信息应该淸晰……对所有人 

面对 事实： 电脑是傻瓜 

电脑将朗读图像的 ALT 厲性文本 

将过长的 ALT 文本转换为 LONGDESC 

对干 Audio -^ Go 的的部分用户，前面的改良确实有所不同 

可访问性不仅仅考虑屏幕阅读器 

利用 Tab 键的网页内部移动应该葙顺序 

Audio 2- Ga 可访问程度好多了 

WCAG Priority 1 

色彩不该是唯一的沟通形式 
网络安全色的世界 
色0的世界 
色茴版 Audio -2 -Go 
那些星星是大麻烦 


背景图像仍然逛你的好朋友 


除了 tabindcx , 还有更多顺序问题 
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倾咐兩户的心声 

和谐设计之道 

良好的设计就是真的听到用户的心声。你的用户会指出网站有问题 
的地方、做得好的地方、（必要时> 如何修正问题以及如何改良你的网站。 
有许多听取用户意见的方式。可以倾听团体意见（利用问卷调査等工具）与 
个别意见（采用可用性测试等工具），以及了解关于网站的集体行动（使用 
网站测蛩与统计数据等工具）。无论使用何种方式， ® 点都是“倾听”用户 
的心声。如粜认興聆听，你的网站会满足受众的需求，某至还能更加完莕。 
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淹没 RPM 的抱怨 

通过问卷调查与焦点小组倾听受众的心声 
问卷调査与焦点小组并非免费 
问卷调査真情指数 
在问卷中问对问题 

最终定案的 RPM Music 用户调査题目 
调査结果出炉了！ 

对开放式题目的同应 
Web 浏览器使用洁况 

通过移动 hover 屈性来修正 RPM Music 的 CSS 缺陷 

省钱的可用性测试要素 

闬主持脚本组织测试 

亲朋好友可能是个问题 

可用性测试结果——用户的心声 

—个简单问题…… 

网站统计数据为用户发出（另一种）声音 
网站解析工具 
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会演变的设计 

保持网站新鲜 

各位建立了这么多精彩绝伦的网站 0 现在可以活动身体、伸个懒腰，等 
着看浏览人数增长了吧？等一下，別急着休息。万维网不会停止演变一一你的网 
站也需要跟上脚步。你可以加入新功能、 调整旧 设计，莊至 全盘重 新设计—个 
时常求新求变的网站反映出你与时供进的设计技巧——也就是说，你的网站是你 
的锻佳宣传工典。 


warn 

到目前为止的作品集 …- - 

370 


保持网站与内容新鲜以保持用户的 101 访率 

372 


Web 设计在干演变，而非革命 

375 


使用 CSS 演变 Web 设计 

376 

jQuerY 

使用 JavaScript 制作 lightbox 特效为网站添加互动性 

388 

JOucry JavaScript 
] lhmr> F 

在 Red Lamern Design 主页里加人 Facebox 

389 


编辑 index 文件 

390 


使用 WordPrcss 加人博客功能 

395 

W5C B 

为 Red Lantern Design 网站添加 WordPress 

396 

XHTML * CSS 

博客真情指数 

398 


利用布效主题改变博客外观与感觉 

400 
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Web 设计这一行 

注意自己的工作 

在 Web 设计的书籍里讨论商业问题？你在糊弄我吗？各位已经 

粘通了前期制作、信息架构、导航系统、网站配色，驻至包括可访问性 。在 
成为 Web 设计大师的道路上，还少了什么？这个嘛……你还耑要而对 Web 设 
计这个行业的问题。你不需要哈腓的 MBA 头衔，但敢好知道银行账户 以外的 
趾界……否则支恶可能不再进来 U 我们将讨论一下如何逑立良好的客户关系, 
并了解厲于你的知识产权。结果呢？利润增长并可以保护辛勤工作的成果。 




xviii 


新的潜在客户 ： Foo Bar 

404 

Foo Bar 对报价单的期璧 

405 

— 起为 Foo Bar 建立一个快速模型 

406 

欢迎光临设计海盗乐园 

413 

你是哪种类型的 Web 工作若？ 

416 

Red Lantern 预期中的新客户 

421 

设计一个网站有哪些实际需求？ 

424 

计算总价 …… 

425 

使用提案书给客户 传达详 细报价 

431 

Trilobite podcast ： 新挑战 

433 

采用 Creative Commons 为作品授权 

433 

Creative Commons 授权 
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附彔： 遗珠之憾 

十大遗珠（我们没提到的事） 

我们真的讨论了很多主题 0 事情是这祥的，还有些 m 要的话题与花絮不太 
适合放人前而的任何章节 iE fl 我们非常确佶而乱认为 -• 定要稍微提及这些话题， 
否则本书将不够称职，干是出现 r 这一章。呃，不箅一贲，其实更像逛附录（好 
啦，就是附录），但这篇附录的内容是不容错过的十大遗珠之憾。 
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前期制作 

纸上策略 

厌倦面对挑剔的客户了吗？你也知道那种类型的客户，每次给他们展示他 
们最近提出的疯狂设计构想时，他们已经变心了……想要另一种色调……另一个 
完全不同的网站，该如何处理善变的客户和怎么做都不对的网站？就让我们从白 
纸、铅笔及一块橡皮开始。本章中，你将学到如何在一头栽人 HTML 编辑器前聪 
明地工作。先为你的网站设想主题和视觉 隐喻， 用铅笔勾勒出草图，再利用分镜 
表让你成为敏捷灵活的 Web 设计师。拿出你的素描板，我们开始前期制作吧！ 




你的首次“国际”浪出 

38 

编码前先想想 

40 

清晰的视觉隐喻有助于强调网站主题 

41 

主题表现了网站的内容 

42 

头脑风鹺：通向视觉隐喻之道 

45 

为 Mark 开发主题与视觉隐喻 

46 

网页元索塑造视觉隐喻 

49 

为 Mark 建立_个快速 XHTML 模型 

56 

还有 CSS ， ■… • 

57 

不用代码，使用分镜表开发构想并节畨时间 

61 

别为了自己而设计 

62 

为 Mark 创建分镜表 

64 
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趣织 R 站 



“在绿色水塔那边左转…… 

网站导航大道有点崎 岖吗？但凡讲到网站，用户一律很没耐性。他们 
不想浪费时间#找正确的按钮，或在用 JavaScript 做出的三级 卜‘拉 式菜萆 M 
艰难地前进。所以你必须花很多心血做好网站的异航系统……而且要在:进人 
结构和设的步骤前做好。上一章，你为你的网站想出了很不错的主题与外 
观分本章 t 你将 以清晰的组织 K 正地提升专注力。结朿这一章时，你的网站 
将能够告知你的用户前进的方向并防止他们再次迷路。 





在布局里填入内容 

71 

组织网站的信息 

72 

利用信息架构 (1 A ) 维护网站的组织性 

19 

IA 小片分类法 

80 

卡片 分赉贳 惜指数 

S 1 

将相关的卡片分成一# 

86 

为毎兹卡片取个简短且具描述性的名称 

87 

何种卡片分类才正确？ 

92 

把卡片排列成网站的层次 

93 

IA 图只是画在纸上的卡片分类 

95 

1 A 阁并非只是网页间的链接 

96 

从前期制作移向实际制作 

100 

逮立 Mark 的网站的结构 

!01 

先创建 index,html . 

102 

. 再创建 screen,css 

103 

从前期制作到实陆制作：完整流程 

106 
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建交奚艰网英 
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美丑都是 
用户的观感 


餌餌， 我知 埋他谀馋是 J 5— 令*畊 
的系板 女服奔 8,佴我认为你躉最好 
的……帒总是亭心其漣 ffl 户的 t 求。达 
不轼是犬隹想 S 的礴？ I 




这是个非常庞大的世界……但世界上到底有哪些人？你的墙上桂着闪亮的 


XHTML 与 CSS 证书，期待中的客户来电让公务专线响个不停。进展不错！直到你 
接到第一通关干版面编排太差，或是关于 logo 真过时的投诉电话，头痈就开始了。 


究竟该如何创建美轮美奂的网站，而且能够让用户满意？ 一 切都要从良好的规划 
开始 & 然后还需要为 Web 编码.熟悉你的受众，还有最宽要的一点，确定你是为 
了用户而设计，不是为自己而设计。 


进入新章节 




欢迎光临大时代 

鸟 Red Lawterw design 含作的犬好机会 

Jane 刚买下一间小型网站设 i 十工作室 ， Red Lantern Design 为当地的 
企业设计小型站点已有多年，现在 Jane 想扩展客户基础 u 但是有一 
个小 「 n | 题…… 


Red Lantern Design 网站原来的 管理员 使用了 WYSIWYG (所见 
即 所得） 编辑器來创建公司自己的网站，现在没人能够编辑那 
些文件。 Jamr 为了逑立新网站而鹿用你，她希望新网站能够提升 
Red Lantern Design 的形象，符合当代网站标准并为公司吸引更多 
有利的客户。 



^ e d lantern Oe^n 


的斜老抵 


我兵3—令 r ® 孕办的©际商夯会议的庠伎。 虽然我 
对 R 站设 计一窍 不通，侄我知坦饽是迖方®的专岽 6 所 
认你遘袠设计~个真正让人印枭琛刻的闷轱 t 布徂逨度 
衮怕> 炫车要离，你办浔到鸡？ 




当然办得到。 

你觉得该从何处着手呢? 


2 第1章 
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建立美观网页 


笔上眸 


下而是 Red Lante[n Design 当前的网站。观察这张截图，使 
用你的网站设计专长加上注释。写下你喜欢的地方哪些你 
不喜欢？卷出任何问题了吗？ 


㈣I 心 ㈡ 


-r—..... 





Uflw4：ervt 




P*jpk ait more comcious of<5c$tgn than cvcf before. Wlutcvcr *hc service of pnjduct whaicva the consumpdon o% '■aluc* 
an Intuigibk 知 inmetiMi. SuccwAil businEsscs realize (fur Acy offer dnrigned experiences 

regjnJics^ of service or produix vld invc^l tbe nwcssaiy ca enhance bodL People arc not only more consckiui of 

ilei^gn. dvy axe Emngiy tbr images l^cm» and cxpchcnces Uut atify them on mjn> kvicU .： prigmatK. 

hJco3agkil , cuttural They art bm>£0' Tor ■£oocr dcitgji. D«Jgo a about conDccEmg. Woftlng w ith our clients* we 
cmph2$iK a dcc^ty consiiimtc research pnxcsj with an cniphuE cm Icamlisg and A1 ihc some time, 

we ccnltr ihc prretwort Wt d«iftn for real pc«pknoi donognphic ur^cts. We umtentand lhai 

m\ people arc Eooking for M)Fncihin£ more and euidc our clicni^ aiHl in ertaTing value 

fof dl Bed Luiim dc$l^u and bulldt simple, luablc. and attfactK'c websites thit aec (asl readable, and acmsJbk * all 
tiding itambnk 


呼 ccUliw in: tntcilAcc - dw£nQi£ and building web inicrfacts snd Ecfnplain uUfig «cb web me 

rign * if you air kwking lo vpdi 妃 ywlr lilt uf move if into CSS ； marfc 吨 and o& optimtatktfi - timpAfy maikup and 


ivdcign * if you air kwking lo updil? ywlr silt uf move n tnto t^S5; irtufciip and o& optimuatMMi - ampttiy maimjp and cs* 
ii> improve speed and make yourulc mem stnxlunJly hvthL coimiltin£ * belp with 访 lie 其 >■■ c& 城 h! imrkt^ 

\ imj semLurs. 



目前位置 ► 3 



























你怎么想? 


,相戒 iij ■冰 ot 
: 烘〜抖电迕 
: T ^ Si - jgj 

為: ap ： m ■沒办 

殊 Si.. 



磨笔上捽 
薄答 


下面就是我们思考的 网站。 你的答案可能有些出人，如果没 
有全部答出也不用担心。 


料柢挢戏嗛 © 

J 4 宏屮棼作岌 

ttst ， 卟蛛 3- 

妈氺泠哆 S 

so I 


R^SL£?tervux?esLg? 







\\ 


「eopk arc 33 cwiwimis cf&igshantvet ?o-r?5=hJ5 cr die sfn-ioc s p?odlKU^tu5 tt&c cs£mptl^vlhlc_ 
an inf «Jh?r 3 f>lexl sumxiodibpu smclK^S- succcsfE-J UWJnci§ 3IQ-C &t they osr deserwd spenenco 
s?«MUJCMcit SCTV5 or product sda-VLSU^nccwsJuy RWOUFWECFlhilnce i』eopk an? noi 一 > 3S ctKlsliHU tf 
?arc huilglyer kn3SH,&cmcs£ c^cncfKC^ i salislhcm s many kv&: SEfwtic. pcaunui?-, 
id 名 loli^CUJturdl. aftrnlro- wJci^nbe^sijiatill^ c'ocwcctlj^. vvnc^s'rls ■&1 c^cn=wn 
cmphas-c iysusk deeply cwukkratc rcwwich prwxss5.Eh fe SIPiliiH § ICMs'g ILliEinfAuhc same tBIK+ 
m c ccmcr 耷 pnxess ah a&knccs arwl 3Iw^b Wt -ilrncE.twrkl noidemo JJnphkr 長 cw-wccmkmHKJ &- 
real people tisks-^forl^mdhs'EmwtandftuycourdKnff.pnlcwsKUCS^IUs-cpras-Ki^iLsfKIblcvalut 
lUf aFAaLuntGfnsrK-glv Jmlrilklb }5'lpk\ Liable, lg.annclhc Wd^i9c$ dut 异 I^L^iL^F'and ;lccc£.bk * all 
u^mesfcb 吞 CKkmb, 

\? 令 i5.Jec=: mlaiw design * dc^lpllf^ a£ busingu&intHtffac^ atKl^mp5:cs lwn«seb sl3TKkr<!^^cb >J4e 
afcr^sHeeplkhlc) 莲 ^-cQf movevlslonss: crurkup and s 丢 iBk/atlod 丄暴 ^Imfi ^ 星 
tlHn^n>vc ^fK^l Lmd n&c yuorstc inm itn^lumuy Hmnd“sm£I:un£ - hc'a'f&dt^s 巷奋 yr'OS 色 -scvcp 
suKt^i ■每二 iH-§. 


办钱 痤亦朴 it 

fjUt 

夺 •*:?> 

^务- ? 

lu I 

IV % 氹 

mEh 



;0 负 lfls .? 弈岛菜 ？ itl 料 aife ^41 
Ha.t 初 t •♦抄汴 a 被 &5 ■- 


f N 冻 ws 氯 

♦ 浴汾 M 菊。 


iiss 


A 

—* 

.T 

B 

回 

E 

' 

| 

* 

0 ： 

Oj 

: 

—‘ 

1 

3 o 

'1 

• 1 ， 

s 

i 

ll 

! li 

B ■-« 

1 

I » 

h 

；i 

K .• : 

L M 

卜 . 1 

] 

1 

" 4 

il 

1 

j 

!•' 

jr v J- 

| 

*9 

* ^ f 

1 .1 
f， . * ■ 

ii 

a, 


4 第 im 





































□ □□□□□□□□□□ http://www.pin5i.com/ 

建立美观网页 


从何着手 


前的 Red Lantern Design 网站上确实没有太多好东- 

lo 辟还不错 4 但如果只有 logo 可取，对于网站的其他部分可 
箅是相当苛刻的评论 a 假设这个网站真的很楢糕.该如何继 
续下一步的工作呢？你该从什么地方若手呢？ 




rnm-m ■ ■ ■賺 




■ _ v ■ ■ 


达个 


« i . # ■ 


我 


知埴从秭里7手。砟个……我会一 
点 HTML 。 我会从 代码孖 始。 S 刻通代 
码。然后爯制作一些……邡个 GSS ■这 
梯就行？ f 你党得如诃？ 




2ce Bit>w 

名家。你有升么凑沾？ 



磨笔上阵 



Joe 的想法正确吗？还有其他要做的吗_?你会从哪若手呢? 




■ ■hl + l-kBAiaid-h 
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编码前先准备 



该从什么地方着手？ 
续？”都是很好的问题 


n 


与“该往哪个方向继 


你还在问 Q L： 这些问题，而没有苽接打开文本编 
钳器就已经是种好预兆了。I •.述两个问题的答案 
中都会提到设计过程 (design process) 设计过 
程为你的项目建立架构， U: 你专注于任务,而不 
会管然误入所 w 歧途。误人歧途的结果，除 rm 
力、压力与带來更多 f 玉力,无法完成任何事怙。 

实陆上，过程只是工作流程< workflow ) ， 决定 
网站设计项自中工怍完成的顺序 a 想象你在为別 
人逑造房屋。这是委托人梦想屮的小窝 ， 各式各 
样的要求层出不穷，此外，你违需要为他们加上 
—股房 m 会吖的要 尜： 墙喂、地 fcL mm , m 房、 
卧室、浴室，起居室…… 


现在，问问你自己,该从什么地方着手?你会先 
盖房孓吗？还是先挑选结构或设计蓝图呢？哪一 
项工作会在两周后看到成果?甚至能在两个月、 
两年后都看得到工作的价值? 


6 第1章 


□ □□□□□□□□□□ http://www.pin5i.com/ 

建立美观网页 


甚 1 懷是第一要务 



等级地将它们组织起来 a 


大多数时候,每块信息都是单一网页上的内容(文字或 


图片等)。1 A 与建立网站导肮也有紧密关联。所以，如果你 
的 ia 很 m. 阼同 样会冇一个梢糕的导肮系统 & 如果你的网站 
没有可靠的信息架构，用户会觉得网站缺乏组织，而且I上人 4屢结构认 g ® 开#。 
困惑，他们将前往邦他地方寻找需要的事物。 ^ 


迚造 N 站很像述造房屋。如果你从绘制房崖的蓝图开 
始，你就会知逬链个步骤中确切的任务目 标：房 
屋地堪、承茁墙等。网站则需使用信息架构 
(Information Archiiecturc ,简称 IA } 。 IA ；2： —种 

过程，在些过程中你会将网站内容分解为多 
个块 （ chunk ) ,然后依内容坱的逻铒关系分 


反命分支潘 

^ ^ 中. y ^ odua " ^ 

、 s 下方 乃 


用彳輿噬网站的铥©舦基 




把你的韦鲥过看 
这个®卷起采体 

楞漭木。 





PiiHt Qoohs" 分 S — 、 

^Product^ 分 S ¥ 

CT & 







最后 子 M Pnnt Boohs " 分 g 

下的 3? 个 g 出跋囝丰 0 录 


特内容分有成！ 葙鉍迗 咎 
块键时关辟 J1 分 4 绝轵 




纽珑脑 


关于 Red Lantern Design H 站，你 
还有哪呰内客？你会如何排列它 
们？需要 史多材 料吗？ 
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信息架构 




信息架构过程，就从向 hne 询问她想要的网站内容开始。 

下而是 Jane 想要的网姑分区。请用一个或两个词简单地描述内 
容块 P 





备忘录 


From : Jane 
Subject :网站内容 

我们设丑-个关于 — n De •的新闻与更新分 
|^_ t 

我们的 H 3 卜定要有能 ㈣ 示本公稍有超棒作抑的分 

网站 需要 ㈣ 联络我们 的頁 ^如果没有联格觅面， 
么会有客户？ ！ 

如果有个网站分区能够提供公司的信息应该不错…" 
我们的工作成朿之类的信息° 

还需要达读者知道我们的业务包括咨询和网站设计。 



8 . 第1章 
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— i 找出 Red Lantern Design 公司网站的信息分区后，你就可以开始逮立信息 
架构图^在下图提供的空格里填入你根据前页信总而独创的分区 名称。 


3 A ffl 运&认主否， 







这 薄个分 s 萤芍以成入 
付么内容的 "缺 — 戎 7 



硝记 CL 

其上分 S 的孑分 


目前位罝 ► 
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何为你的信息架构？ 

信息架构过程，就从向 Jane 询问她想要的网站内容开姶。 

下面是 Jane 想要的网站分区^请用一或两个词简单地描述内 
容块。 . 


磨笔上辟 
\薄答 



6 




备忘录 


From : Jane 

Subject :网站内容 


我们设置-个关于 Red Untern 的鮑与丛分 


区吧! 


我们的糾―技有能公稍有碰狂的分 


H 站需要能够我们的页面 


如果 没有座 I 造页面，怎 


么会有客户？丨 

如果有个 ㈣ 分区能够提供^ ^应该 不错‘ •… 
我们的工作成果之类的信息 

还需要让絲知城_衫 a 括组和 


NeMS Sl 


?02tiolio 


Contact 

零 4 V * P * V 4 * 4 » I # I 


A6o«C Us 


Consuitin§ t Design 



10 第 1 章 


* 


















□ □□□□□□□□□□ http://www.pin5i.com/ 

建立美观网页 


存了这些信息“块”后，你的 IA 图会是什么样子？ 


4我们的讷®中 * 我械 

tri ) 下_ 了-个乃一 

士八 [5 让用户卷対 Red Unt ' T " ^ 





在 "Services 下 , 
我们加入 3 am ^ 
备 S 录中摄利的 
荈个 ft 6 硝 u 



We 6 



Consulting 


，们将"叫邮&办心化/渴写 

以“諡! r 以•金 



龙 有蠢问 1& 

有鏖商通 


闽 


IA 图看起来都像倒过来的灌木吗? 


^ ： 不见得，虽然倒过来的灌木大柷是最常见 IA 困的 
终极形式，老实说，任何能清楚准确地表达内容分区与子 
分区 （以及分区层次关系）的图表都可以6 

1^1 :找我设计网站的人都会像 Jane —样清楚地说 
明想要的分区吗？ 

答:是的……但也不是6你将惊讶于访谈时可以获得 
的额外分区细节与设计构想 D 只因为委托人不知道网站上 
的分区通常有什么称呼，并不代表他们对自已的网站的内 
衮没有清楚的想法。后续以逻辑与层次组织各个分区的工 


1^1 ； 我不能直接跳过这段计划过程吗？这个 IA 图 
与第7页的图表看起来很像…… 

^ :别这样！别跳过 1 A ， 因为在你编棑网站版面时， 
IA 通常能 决定设 计部件&此外，结构虽然有些相似，但 
每个网站都不同，某些円站有很多子分区。你拥有的内 
容越多，你的 IA 图的结构越深，导杭系统也将越发复杂 # 
不用担心，我们将在第3章详细讨论如何处理 IA d 


: IA 图是否就像网站地图呢？ 
超链接…… 


块”看起来真像 


作就要*你了 




答 t IA 图呈现网站内容分区与子分区的层次关系，并 
非用于 X 现分区间的链接，忸为 F 9 站制作导航系统时确实 
会用到 IAS , 事实上，我们接下来就要讨论这件事…" * 
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何为良好的导航系统? 


少。罗嗦 良好 
的导航系统所龙 S 的只蚤一些用 
來链接到 IA © 列出的所布闷菸的 
按钼，我们可吆上珞？…… 



这样就能帮助你的用户找到在网站里四处浏览的道 
路了吗？ 

在设计过程中，我们需耍多加思考异航系统的问题。 
首先，在处理网站盤体版而时，你需要考虑导航元 
素——没错，就是按钮与导航拦等 ■> 

当你开始编骂代码、述立用户在网站中浏览所耑的布 
W 元尜，制作所有网页的超链接时，$航系统的问题 
违会再次出现。別急善向后翻，你耑要先动手组织最 
m 层的导航系统。 

信息架构不 ( 乂在组 织叫站 信息时很宽要，它对你的导 
航系统也很 m 嬰。所以，逮立导航系统的时刻来临 
时，请把你的 IA 图拿出来。 


12 第1章 
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决定顶层导航系统 

顶层导航 (top level navigation ) 通常是最醒目的导航元素 
—— !；(而顶端的分页导航栏、次级分栏中的垂直 


导航菜艰等。更常见的状况是，顶层导航链接 
到 （ IA 图中）比首贞低一层的分区 & 


® ^ 分@6经移到 Rerf 

Unte ^ Design 问站的主页 f 所以 

^容务认中®送出场层导鉍允 





磨笔上路 


濟画出你熟悉的菜单样貌，并幵始思考适合 Red Lantern DesignM 站的菜萆 
类型。 
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何种导航风格? 



摩笔上溥 
蘚答 


你觉得下面哪种顶层导航设计最适合 Red Lantern Design 网 
姑？如果你还不确定，你觉得该如何找出最适合的设计？ 



分吞核签•…" 





招法 



用子顶层导舦 
的水乎菜辈 



^ 用吁珀层与軚的菜 f — _ 

V 









搞纽岛 純亡本 
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考虑阓锁坏瓌 

m 层异航主要爪丁-显示用户在网站主结构中的位罝。第6京我们述会回头更 
加汴细 地讨 论导航系统，至于现在.你需要决定 Red Lamem Design 网站的 
菜单形式。开始思考适合网姑的菜单形式以及菜敢在网页上的位罝吧！ 





水平分页 


样芍爷省锊多空间。 


水平按钮 


用子场层；叙的水平與 


本例中/菝辟移 a 菜荦时变巧 
较明$的招纫形杖.这差个扯 
心.鉍致的设 


Expedla * 


Flights 


Cax^ v^CAlion Crul^e^ AcikvJrieft DEAtS A OFFERS Maps Business Travel Rewaf 


Holds 


Sowch&tpcdfl 


:.‘ 一 , -. r v 






垂直菜单 


垂直分页 


amazon.com 



Departments 


Bwhs 

Mmla > 4 Music & Gamas 



用子领层与权的# 
5 某羊。 


Dlgtel Downloads 

> i 

Compottre & Offici 

> 1 

EMctrontcft 

> f 

Homt& Garden 

> I 

1 _ _ _ ri __ i- 

6 rMAiy T Htalth & Btauty > K 

Toys, Kkto& Baby 

ft. 

> 

Apfiaril^ShMa & Jtwtlry > H 

Sports ft Outdoori > . | 

TooCt^ul^&Mua trial 

> J 


: 大诒的句 3 

这甚袅金欢逆的某 
荦衫式 D 





PRAGUE-VISITESGUIDEE 


用彳翊层导袄的 
幸右分资.本例采 
用 CSS 与 ©片 鈞两 
玷加 I :类似笔记本 

的 R 格。 


窖基用沾 亡写咸 0 兵 
予处 if 多 ©1 ■会言的问 
抵， 璜4考的录 L 


Guide de Prague 


DECOUVRIR PRAGUE 


4n uuidant m mnivicos p™ot do gu 
diroct^mthit r4B«rv«j moi torvkM 
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纸和笔? 



基础设计箪懷清 Jawe si ® 


你已经似定了中要内容 0 下一歩该做什 
么？这个时候，敁好把你的某本设计草 
图孕:给 Jane 肴看。 


绐我站住 f IA © ,绒上的设计箪©…… 
为什么一盗在©©畹？我还呔为达是一 
枣兵子 w Web " 设计的糸 葙。我钊规在 
还滾潘 到兵子 Web 的东®…… 


清楚地知道该在显示器的哪个地方放置 
建造网站的构件可以节省宝贵的开发时 


在纸上画出几种草图 ， 在动工前观察 


Jane 的反杈会比较节省时] Oh 而不赴把 


时间浪费在编写数种设计的代码后 
才请她从中挑选一种…… 
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箪裰专注子 功能性 

你的第一份草图应该只有黑色和白色，而且画在纸上 & 如此一来, 
Jane 才会把心思放在基本布局的设计上 <而不是背景该用什么颜色, 
或是 她的！ ogo 放在图片上有多好费，或是……各位自己想象吧！） 

你的设计应该1上 Jane 看到一些基本网页布局，并以各种网页配 i 呈 
现她所要求的内容，草图应该能让 hne 思考： “我想在网页顶端 
放一张很大的图片吗？” “我想要几列？ P “菜单应该放在什么位 
置？ ”等问题。 



瘙笔上阵 


网站太过和似.…，.该©钊餘 



下图是你呈现给 Jane 的第一份草图。她不太嵙欢_因为草图与 
原本的网站没有太大差別，只不过把主内容 E 分成两栏而已 P 

现在你耍想出 Jam ; 会喜欢的基本设计。诮另外画出至少三种设汁 
草图。 


使用 水年钱段代表食 
裳太多刼竽 。 


使用荦©牴柢含茧 
在故张上。作后4 
处理紅爷郎分， 
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画出你的导航构想 





上阵 
藓答 


迤本的黑白草图 It 注意力集中在主要布局上。现在该对 Jane 呈现 
茲本布局概念了。她会选择哪一种设计呢？ 


2 






c 


1 




irtM 今 


第二#议 4 方 f 爲有水 
孕分否菜荦 a io 5 o 鸟 

下©的瑗©分成丑 
括，_藎©埒的 空间下 
砺4新间分这：右側則 
4 Red 网站 

tS t ■+的作名讀 W 錦格 
® 1琬。 


i 輩详 
绝篥美 C 
以式 c B 
售页 5 f 2 

方分这的 
舛代的 S 
ta 奴4分 
#辈■容 
三某： t 内 
第本 a 鸟 
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辞设幵方亲分咸三 
桓。 孟龙®辟佬子在1 
免，&5。兹在右谢，下面 
则#菜 S 字内容和 
<1*謀。 










































下一步呢? 





Frank： 不对。我们迅是先停留在纸笵作业。你们觉得为_:图加 
h— 些色彩如何？ # 


: 为什么要那样做？不能直接处现代码，然后用 CSS 样式衣 
测试色彩吗？ 


Frank, 纸上作业能沿到色彩的交II影响、 界而 与布局元索 

加上色彩后如何相互 作用、 导肮系统与版面其他部分如何产屮 
视觉关収、内容是否以取佳方式呈现。 


J 时：哇。听起来对一份小小的草图要求很高啊!不能眺过黑白 
草阁.宜接拿一些上色过的版本给 Jane 沿吗？ 


Frank： 在过程中，客户很容易因色彩而分心。最好先给他们沿 
一些显示网站功能的东西…… 


我们郄同衮 Jane 决定的萑本布爲 ， BT 
步应法戗仔仓7叫出老钬伴丈枣 編铒鎊 ，抓 
取 Jane 搵併的样本由窖，然启制通一场 XHTML 风 
晷喝？ 


Jo€； …”•在我们进人设 i 十过程的外观与感觉 （look and fed) 部 
分之前 mm r. 把设计化为代码前，草图提供了捕捉任何 
潜在设计问题的无痛方式，它们可能变成 m 大障碍 & 




Frank： 你讲得有理。但现在不只是画一份草图哦! 


Joe； 不是? 

Frank ： ,—- 

Jim： ……不是。我们耍画很多草图，全都是不同的颜色组合， 
然后就像谘一张草图一样拿给 Jane 看，对不对？ 

Frank ： 类似这样。我们实际的工作是创违分镜表 
(storyboard) 来测试不同版本 & 我们会窣出 M 好的一种成两种版 
本给 Jane 看. 

Jim： 等一下。你刚说了什么? 

Frank： 分镜表——看起来像漫 111 的小格草图，拍电影前用來测 
试镜头的东西。我们也做相同的亊。来吧,让我带你们卷创建 
优秀分镜衷的秘 
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今晚 主题： 铅笔和设计程序讨论分镜表的问题 


设计程序: 


嗨！设计程序！你可以帮我理淸一些疑问吗? 


没问题呀。什么问题? 


我宵点 小疑问 P 有些人开始称呼我是 w wireframe n 
(线框图），但我一直以为这是描述代码模型 

(code mockup ) 的名词…… 就是说啊！大家也用 “ wireframe ” 表示尚未具体化的 

代码模型，真让人有点理不淸头绪。但现在还不是进 
人代码的时候。 


代码（偷听 中）： 

我听到你们在背后说我了哦! 


铅笔 

不好意思啊老弟，但设计程序说的没错。你可能觉得 
直接进人 HTML 可以节省时间，但长期而言反而可能 
浪费时间 & 你想想，如果客户（或是你自己）不喜欢 
刚提出的设计，而想改成完佥不同的方向，这表示你 
为了不会被使用的 HTML (可能还有 CSS ) 投人大蛩 
心血。另外拿 一# 全新纸张制作分镜表就容易多了， 


我可没这么肯定。我更苒欢不制作出全部细节。分镜 
表的道点是快速且灵活地促进头脑风恶，从而确立某 
些设计。再说，何必花时间在毎个设计中斤斤计较几 
个像索的位置整异而盔户只会从中选择一种？ 


设计程序 ： 

……或是用新的文件。我一开始就走在正式道路上 
让大家直接从分镜表釭制细节到最终设计里可以节宙 
大造时间 P 


你说的可能有几分适理，但你贳的要把自己这副涂 

改杂乱、又破又缺角，还有咖啡溃的样子拿给客户看 
我想，如果要推销给潜在客户的话，或许拿出崭新、 吗? 

正式的展示品会比 较好， 但我还是觉得，详细的手绘 * 

分镜表应该是开始设计新网站时的第一站 P 
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分镜*齑起來真蛊 太#? 0 R 蛣的设 i + 鸟 
布爲郫不错 。 佴研 计会 RW 兩宍就要举行 
3 ■•…■我能潘剡它在屑蓽上的样孑码？ 


现在是用代码制作网站原型的时候 

使用代码逮立原型 ( prototype ) 有很多优点。酋光，即 
使你的设计在纸上看起来很槔，但（就技术上 宵） 不见 
得可以写成代码。在你投人太多时间干建立光鲜克丽的 
成品前，原型提供了快速修正任何（编码相关）问题的 
机会 & 

还轺，如跟你是为客户设 I 十，可以给他们展示编码完毕 
后的原型，就像分镜表一样，你将得到有用的反馈怠见 
并可迭代修改网站。 


r ? yH 迭代 ( iterative ) 是什么意思？ ： 

迭代是种设计方法论，在工作过程中 I 
测试、分析，然后进一步琢磨作品的 i 

酽 


:原型。你在设计过程的毎个阶段中都会 JE 复海个步； 
^骤-它是循环的，直到你（以及客户）得到满窓 I 
^的结果。 i 
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1 tm 

/ •芦 



欢迎取用第一份代码文件，请到 s 

www/headfirstlabs*Gom/books/hfwd/ch01 

然后我们将快速地实际测试一下 ， 看看运行起来的样+ 




/* Red Lantern 


re des 乎 


0 ; 


body t 

祕 gi n: 

padding ：^ ㈣ 212 

b ac^ound， Helve 
£ ont - size ： 62 - 5 %^ 

coiot - fr 333f 




hl ， 2 r Pf 

margin ： 0, 
padding : 0 ' 




ul . 


Ust-styie-tyi 


1 


CDOCTYPE html PUBLIC T, -//W3C//DTD XHTML 1.0 Strict/ZEW' 1 

,, httpr//www*w3.org/TR/xhtmll/DTD/xhtmlI^strict.dtd Tr > 

<html xmlns= ,1 http ： //www # w3.org/1999/xhtml 11 xml:lang= n en n iang= r( en tT > 

<head> 

<title>Red Lantern Design</title> 

<meta http-equiv= r, Content-Type tt con ten t =,t text/html; charset-utf- 


8'V> 


clink rel= M stylesheet ,r href= f *styleshe 0 ts/screen*css* 1 type="text/ 


css 


mediae"screen" /> 

</head> 

<body> 

<div id= f ’masthead_【> 

<hlximg a It- 11 Red Lantern logo 
<ul id= ,r nav ,f > 


src- r, images/rl logo*png'' /></hl> 


<li><a class= ,, active 11 titie= pl Red Lantern home 


href =1l index,htn[il s, >Home</a></li> 

title= n DesIgn services 
h re f= 4, se r vices. html tt >Service5</a></li> 


<li><a title =,, 0ur work" href= ,, portfolio*html ,, >Portfolio</a></ 


li> 


f tt B 

粟町 氣 mu 名 & 后你 


titXe= r, Contact Red Lantern 
'>Contact</a></li> 


'> 


leader 1 ^ 


^lt="tokyo buildings 11 src= ir imagos/tokyo.jpg" /> 
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试驾 



该在你的浏览器中检査网站了^测试过网站后， U : Jane 过周，取 
得这一轮调整的反馈意见。 



L. _ s , 1 pyp-'3ff I "w » 


RED IANTERN 
DESIGN 


«oo 


R©d Lantern builds unique interfaces & usar experterices for the web . 


第 1 章 


Our Work 


SHI 


Welcome to the New Red 
Lantern Design 

Lor cm ■psum Si? iirticl conscctotuci ad piling ^\tl 

5n arhtrE a-i l+ptild kJCnjr[ f i p(jF5ir-C>c] Fujcc 
tmiwrdiei mole sli? dakH Do n ec C ^me^Cum Kjrcnn ul 
riiOEus Qi.isqii^ a vol-t M^ctcriHStLi fy((3is 

.jiicicj : LilpuDtcr ut w^Cit ^-u <Itj| vi^t 公 uMn 

irinpll!^ Donee OOltX nunc. iu digni 私 sc^. 

ihoncus ut tcilvs P^iKn 沁 sq ⑽ h) nisi Null^ itnddum 
Fusto net du> M-iecerpSs maiesiuid moi:<s tsi N^iijrti 
vi! nr Pjoih ^ctus SuKipn dolor Doritc riK jrcu 

Nam ucifira loo corngue s ， cc ： or4q；jo 

vchiicUJ r*r**r sed arCL ^cq rhoneys 
Pclleni'ojqyc corrrr^^o \ h ivc>0^v ri.tih Cliii PM moOflQ 
cofTtl^^cnlLifri il. in ： ofd>m ^rrs^rc^C U ^jWa vtl 
»co 

L ⑽ m ipsurfi tSofiDF sit o/Twt. conwcfetucr iKAptsms @ll< 

取 「-- - _ ’一二 ’― ’ 二一 '-— 工二. 2 :—™= 
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From : Jane 
Subject : 网 站内容 

— :二: =::====' 

businesses realize lha. they ::二 

or product, and invest the necessary resourc exaeriences that satisfy them 

co Lo U s . ，ev are « 

on many levels: aesthetic, pragma ic ( ^ emphasize a thorough, 

«. Oes i9 n isa b outconnect 

deeply l jence s and context. We design for real people, 

same time, we center the pro , innkina for something more 

n0t ^graphic ^ yalue for alL Red 

^ s... usa b ,e. and aUractive we b s,es ,at are fast, r ea dab,e ( 

and accessible - all using web standards- 

. A ln . interface design - designing and building web interfaces and templates 
We spec.al.ze ^erface ^ des 9 . f yQU gre looking t0 update your site or move ,t 

using web standards, web mArkuD and css to improve speed and 

into CSS; markup and css optimization - marK.p =二 ^ ^ and 

make your site more structuraily sound; consult,ng - help w.th design 9Y ， 

markup suggestions, and seminars. 




以下是 Jane 刚刚传来的文本。拿个秒表，设定为 15 秒，按下开始 
按钮后阅读内容。时间到时，请写出这段文字的摘要。 




备忘录 


27 




























槽糕的文案就是糟糕 


别用緖糕的殳案銳？好设计 

尽管设 VKi : 作、分镜丧与原型制作得很好，但都无法拯救一个 
没有内容（或内容呈现方式 极差） 的网站，该如何确保内容引 
人入胜？ 

网站写作与一般平面印刷媒体的写作大不相同。 



比起平常由左至右、由头至尾读书的方式，用户会在网站文章 


中扫描关键字及概念 


以便大致了解网页内容。 


上述说明结合用户通常不会长期停留在单一网 M 的事实后，现 
在你知道需要以完全不同的方式书写了。今天的海日一词就是 
可扫读性 （ scannability ) 。 
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付么使得殳本與 杳玎拎 读性? 
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使文本可拍读的技巧有好几种。较短的段落、 
标题、 m 点淸单、清楚的意义都能帮助用户 
更轻易地扫读你的内容。 


闻介 Si6 太 f 茲供？猹体的柢注。如 
此一來 ■ 该老主 釗芍知 迮正在老行么 


I 仏 m 


该老級 m 3文 
t 的整体及孑 
分 s 的信总。 


« no 


Wkljtinjon^g Cns/Ch««dii - VMki&ooks. co'^ccfion ill open-wn«m Ktv^fpks 


〕回 @s \ hilp:; ftiy. org fwitt .^Wikijun'nO*,6iq,CiT i /ChtfTili 


-- 


{m p 

r ' ^ - 




et 起义多殳长的 
太本块. 葡短的 
段落更容易阅该 
(长丈本 4 电胎 4 
事 f 较磺阌镇芨 
理铒）。 








C^e&to 






kif(h 


•/‘， t hi ■■: 


重 #. 糾表星您事 
贪 f 现铪用户的 
跬估方式 a 


Wikijunior:8ig Cats/Cheeiah 

Fiom Wlk^octs. lh§ cp«o-c&r46fic t^jdbcct* ccxim^iksn 
CTi«Mhi AfA butr for tp(M. 相 1 作 a ^pfike *pmfl. long lags \crg [M ittM «cts 邮暴 

ludder \ot sudaen (urns Ttwy are tfre ws4a^ ras(«t Und afcle !o ^pfinr uplo TO tniti 

per tour <i ]&hphi (Cf ihort 4&i4TkC^ hi d pfty. They CArt 90 uom D mdei pcf Nmxhj 

70 miJw pw how m iiaI ^ i ㈣ ivcond^ thev 次甸 rK^TLim. ciwtAhi 

1c b« in fsx CjiiCl^n^ MiEd 卩 Tlwy 必單 aI^io lirK^n m 1-kinting IjKpiMi' 


Whefe do cheetahs live? 


|K3tJ 





I CKUy m«t ^n* tfioreJ irt iuO'&dh^rdr Alrtf i 

ihiCHj^i a teiM are aldl seen In tfan rn the past they 
10 ^ fouf»d thro^ghctJC n^rth^m rndlA jmd Ir^n Th*v pr»f*f 
lo Five m ^Jvanrui. pnirt^s. And It4ck 

brusJh Because th^v upon hunt. lh«y ovc4d 

t^i^o CP^tcv^u^n 抑 in crdtf lo ^ad (he cheeia^ teccxntrig an crtry on the 

eottawflrt secern w. 




f^iajti _^erc qKcttaf e he vt 


What do cheetafis look like? 

CNMrfjJts rn«durv^uM dogfiii^ spotted c«tfi with to^ t«9$ -M 
1 1 an bOite tTi^y havu a i^hita bdly jnd a dJifc £(#lpa Uul Ischt Mie j 
cn both 04 Ultif IAC«. CDC«t^ JJiO hivfl ItWIfl OW Sp0t& 
on ihe¥ fur. AoUt cne«t 挪 wrtt^n froni 90 to 140 peum (4<J-&5 k^h 
ima Arfl 4MU10 i i &5 lefli (M 2 lKtmi [ot^g 讲 buil to bo ino bo^l mmefs Thoir icr^ i»\ 

prt>yiE)&& them vtrh tdd^nce Thfty have ft ch«fii a wnow viAl&t vc pow^tui hmo They twe a 
ameil head arto muzzle lorpe n 0 $rri$ fa lr<nei$«i ir4dk^ AM smAil roufd frArs All of fftis fnAXfrS 

I he th«l4h v^iy ^1^1(. ATieI d^CKf^r^fruf ： utl^fi tl Ull. 


JMT] 




What do they eat. and how do they catch ttieir prey? 


i^iij 


Cheeiahs ir^TEy eai mammiife Nkn ou olios. 九 onu Citbjts, 

£k^e 泌 ！^ smaller IbA^. Ar M\Jtt Ch<»(4h. 


iwms. wtuch 則祕 flbou\ ilw s,v ⑽ 



rr^M. 1 ^>i 


iiiilK I Mr prfty ur« 一 Thay */• Ihrtn MmA IWrty from MCh 0*W. Artj Ihtft §fw^ 

chas&. The rtmse p« v&y^lly me* in Emt Lbjn j mn^iv and If tha {hc^idh <3o^n1 c^tc\> II& pMty 年 rfckly tt 
Miir o^gti qhi &up fjffhtff lhan was to enenyv . TN& twHiso cl^d^ u^e A Iff 04 cn^wgy iMW 
ptty Jl £tjcl> tvgh ipecd AJbctit fMil cH Uw cluses ^ic auccQ^afuL 

C-iwiflJis nr>u$t cm mc« catch quickly ot nsh ttnlng ih^tr food 的 oihif prfrdat 的 Qm 油 & ftet 

wiiii 在 animal o^cr ioc^J t>sc^e ihcy cant fr^k m tryu^V medn ceriibn siafv^Elofi 

Cheetahs orv w&4-Ad^pl«3 \o 隊 jvmg tn j^tki efivircrmcrXt Jn ihv Kar^^Hiui Ovtv^, I My hatvv bvtvi vtmiA«iiD Uave4 an S2 kin 

Ewfwecrt oMi cf wa*w. Ihcy were s&cn thoif ^lef riem ui* 以 sod 饵 \#irw of pcoy. at by frying ru<ion^ 

Fun facts 




Sc# iw iriucft >ou kocw atcwi ihe wltft iast&si im n^oiffi 翩 

* Aft^f a ruiU£po«a ru$ri a 此 rmi^i ny$t ^ m^utC3> tefort njnunq 

， Cne^fafis do net but I hey maK« a r^mbef □! vefy un<dAlike soirds r many cl wtueh fe^embtfr intis chirpy. 

* Ch«taHs wflrt? cirflea l#opAJXtb b*lcv4 *wt N Oxe Itv wow) let Clv«4Ah wa» "TeofMftJV ard Eh» mxH tot leopard vmu simply ， p^to r 

Ch^tAhs ciaifKi leo-cw^ (hen 45 a hum ㈣- Utki Fd* lion, sod "pssnf, then the ewnff d leopofd^ 

^ Acwi Tfcni wnm. che4tAli5 Afo itv efty i?iq t^ts 11^1 out 

* Cih4«lAh cubs aft try A lack dt Food €yt thtif tiVnlwi JiCi*i^ iu>d h/rtVi An £id AfnCnfl- k*ncr^l ^7 tear &l4in m^uK.^ 

Co (he chwl 奶、 F^r* at» friNTi lh» moliw M»«p4nq ter tw lo$l cub^ 

OQ nd cjh lha 认 In or benos of iftcir pray. 

.. ■■ . w ••tt ■*• 8 ' — T_ ■ ~°^JL ' 一 ? ■ 1 n , ■ r ^ ■ 一 . j 圓 . TF*TL ^ -▼« ' —tm -bw ^ 里 m^— ju ,■ n —mi _. — 

* ^ ( M I B ■■霧 ""•_■■ !l^> .^pai , !■ t~ ^pL t C |Hi t ^ J a ® 1 1 ^ m ^7 ieA^ ■ _jm -ij .■ I 

L^wi^faft I - B'CSa 破 m^LdM^BbLi 
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当个编辑 




以下是 Jane 刚才传过来的文本。请根据可扫读性检査表重新写作。 



V>tsiQ^ 


RAW 


备忘录 

From : Jane 
Subject :网站内容 

.f Hocinn than ever before. Whatever the service or product, 
People are more conscious of desrgn ^an e ^ 挪 ㈣ sur 賴 ds a „ interactions. 

whoever the consumption === 做加 邮 - experie nces, regardless of service 
Successful businesses realize V to enhance both. People are not only more 

or product, and invest the necessary 了咖^⑽的 and experie nces that satisfy them 
conscious of design t they are hu^ry or im ^ cultura |. They are hungry for “good” 
on many levels: aesthetic, 啊 ::：= w _ r c _ t we emphasize a thorough, 
design. Design is about connectmg. ^ 9 _ hasis on learning and listening. At the 
deeply considerate research Process ^ ^ ^texts. We design for real people, 

same time, we center the process on au f n ^ ^ . afe _ ng for something more 

not demographic targets. We understa ^ ' ^ ^ creatjng grea ter tangible value for all. Red 

- d attra * e WebSit6S mal " faS ' readabl " 

and accessible - all using web standards, 
wo spec. at i Z e ,n: interface 

make your site ^ore naturally sound; consulfng help w,th 
markup suggestions, and seminars. 
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好的文案就是好 




长 篇习通 
蘚荅 


根据可扫读性检查表，你校正了 
Jane 的文章。 


pest0^ 


备忘录 


订扭读性粒戋 j 

or 洁晰的标题 
13 T 较小的段落 

便用黑体与斜体强调齑要 
词语 

(3^ 对适当内容套用茁点列表（有 
序或无萍列表） 


From : Jane 

Su _ : _喊 咖 e Whatever the service or product, 

peopl © sf ® mors _ C _ Of == 二:: — C _' 

whatever me consumption or exper iences , regardless of serv.oe 

Sucoessfu , businesses realize that th bo th . People are not only more 

or product , and invest the necessary ==^_的 and exper iences t h at satisfy 
conscious of design , they are hungry cultural . They are tiungiyfor good 

on many levels : aesthetic , our clie nts , we emphasize a thorough , 

design . Design is about connecUng . _ hasis on learning and listening . At the 

deeply considerate research P racess ^ contexts . We design for real people , 

same lime, we center the process on = : ^ people are l0 _g 骱 something more 

not demographic tBrgets, We unders 扣 咖咖 g greater tangible value for a^. Red 

—_ — we^tes t h at a , fas , readaUe . 

Lantern designs and builds simp 

and accessible - all using web standar s . ^ interfaC es and templates 

We specialize in : interface design - des ^ n9 ^ &re looking t0 upda te your site or move it 
using web standards ; web site rede^.g ^ markup an d css to improve speed and 

— - he,p wuh * strategy, 088 and 
markup suggestions , and sermnars . — - 
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建立美观网页 


你写出的文章可能不太一样，但只要使用了让文本更具可扫读性的技巧，用户都会感谢你。 


Welcome to the New Red Lantern Design 

Rerf Lantern is a small web design and consulting iitm spe— 


x ^? ciatixin^ in stayidazds — &ased web design and development , Om 


0 蛀枵该 老§1 导 i 
内容,讀注逢.我 
们不 f 在网页领揉 
另加核 M, 咖将 
fl 豸 f 个网 w 的 
杉共。 


foal is to Suitd simple f SeautUui wehfa^es that make yow? 
inioimation eas^ to iind and ^oui use^s happy • 

H ^ou ot yout company me intetested in wozkin^ mth us t 
please check oHt ow4 

poztiolio ot and Standing wotfe And contact us mth ^ou% 

pwject detatis. We look io^atd to heaun§ hom ^ou and 
making ^ouz ptesence on the we6 a little simpler and eaffiet to 


find . 

Vtew ouz Jutt poHiotio 
GontrtcC Red Lantetn 



这呰链括锊&以 CSS 移除场 0 符 
考的乇痔涑輩。 




当然，她有可能生气。但这个版本较简短、切中要点，而且 
更为引人注意。 


修改版准确地向户说明了 Red Lamem Design 的业务，以及 
合作的预想。我们删改了许多内容——太长的单词，必须读 
三次才能理解的句子 …， 这些都会掩盖简敢的信息 & 


此外，在最糟的情况下，我们可能与〗 ane 妥协，把她写的 
部分原文放上去……当然，一样要经过仔细地编钳！ 
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试驾 



把文本内容修改得更其可扫读性后，你只需在代码标记里 E 新文本（为 Red 
Lament Design 开发 的）， 然后在浏览器巾测试，如果你觉得满意，则给 hue 看 
看。 



我县欢丨萚 至络餃短的* 
本也 m 好。朗神大部分丈本 
是庄碥的，你的技能将帮助 
Red lantern Pesign 建立知名 
&, 在摊©上枬会布我们的 
€孪！我 s 经等不 as # 绐 
新項 E ?。 


© 画 ^ htia./rm-ww trt AdnutU^i 40 m ； bt^aki l hfwdj'cM l/videv hfml 


RED LANTERN 
DESIGN 


- .墨 ’■， - 7 飞 7 三:: 

Red Lantern builds unique interfaces user experiences for the web. 


Our Work 


Welcome to the New Red 
Lantern Design 

L,jf.'€ i i^ r, arvt ccnsufeNxs p irr- 

C%f (jyiJ b to byiW irp-pto 

rYOU tfWrruiEion c.lSv 'P>n 
■(■jtir l. ： iicp , j i! L ip>pv 

(■ .Cft oi y;j^r t ^.mpiiny is in uy, 

[rV'ijSf crK* chj cur pcMifolt ； or 4ir>a i>F,vr.c^»g 

uf. «_■，■!：;■. rM c ici u$ d 忾 viv^r prpj^MT! t^r-iiK + 

'or^jftr j t ilmfjii| fiorr; vo^ jrm maKrui ytitiii pfL-wm- 
■-J. Ihk ,^ r> H« srrpipf iiirrj 0，'iWf !C» TffvJ 


Vk'^. o<,rooftioito 

Cw W Ljn!e«n 


m' mj r"* ' ±|fcr*ii 1C-C —a j«wb■»«■ 


HRpsS^ 
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Web 设计的重点是沟遍， 
t 乂及你的阁户 

该如何比较 Jane 的网站的两个版本？每个网站的躲终0标 
都是和用户冇所沟通。如果你的网站无法沟通你想要的内容, 
你的受众将前往其他网站，寻求你无法给予的体验或内容。 

这称为 以用户为中心的设计 （ User-Cemered Design ) 。网站 
足为你的用户而建立，不是为了你自己。设计时要考虑用户 
的长处与短处^使用毎项可能的技巧把用户带到你的网站、 
帮助他们找到想要的东西、确定他们在体验中有所收获并维 
持用户的回访率。 

本章中，你遵循的每个过程一 

准备阶段 使用信息架构和分镜表为网站建立蓝图，这样才 
能尽量在数字化时保持效串与关注。 

导航系 统基于 它不仅仅是通往所有网页的超链接。 
导肮系统能帮助用户找到信息。 


网页布局使用 HTML 与 CSS 来建立网站界面（在前期制 
作阶段建立，在纸上设计完成的界面）。 

网站写作把设计填上具有 “可扫 读性”的内容，也是游 
客访问这个网站的原因。 

――这些过程只有一个目标；建立一个美观、可向用户全面 
介绍 Red Lantern Design 的网站。 


建立美观网页 



琢有设0 鸟用户 的汸递 
#不好…… 


坍网 玷主釗 鈀用户故存设錡^ 
锃的中 心、结杲 • t vMkii 
用户的兴錘，4咅诉估们？1人 
入逋的故專 e 
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Web 设计工具箱 


_ • 



你的 Web 设计工異箱 

36 页过去了，而你重新翻修了一个外观 
陈旧的网站，下 一章： 我们深入探讨前 
期制作。 


复习要点 


_ 设计网站时，你应该实现以用户为 
中心的设计——创建聚焦于迎合 
用户需求的网站。 

■ 设计过程协助你架构项目，使你保 
持在任务正轨上，并以有效率的方 
式完成工作。 

■ 大多数网站设计项目由四个部分组 
成： 前期制作、布局、导航系统以 
及写作。 

« 信息架构 0A > 的过程是把你的网 
站内容分解成块，然后根据块间的 
关系重组为有层次的组织。 

■ 开发网站的 IA 有两个步骤 ：组织 
网站的信息以及建立 IA 图。 

_ 1A 图以视觉化的方式呈现网站信息 
分区与子分区的层次组织。 

■ 顶层导航链接到的对象通常是信息 
架构中位于主页下一层的分匡。 


* 顶层导航的设计根据整体设计与布 
局而决定。 

■ 有许多优秀的顶层导航设计模型， 
包括：水平分页、水平按钮，垂直 
菜单 . 垂直分页。 

■ 分镜表以视觉化的方式呈现你的设 
计，并在我们跳入编码阶段前测试 
布局的基本概念 . 

■ 分镜表是投入编码工作前捕捉潜在 
设计问题的好方式。 

■ 网站写作与平面印刷媒体的写作需 
求不同。 

■ 网络用户扫读网页，而不是从头到 
尾仔细阅读 . 

■ 网页内容需要写成适合人眼扫读的 
形式。 
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厌倦面对挑剔的客户了吗？ 你也知道那种类型的客户，每次给他们展示他们 


琨近提出的疯狂设计构想財，他们已经变心了……想要另一种色调……労一个 
完全不同的网站。该如何处理善变的客户和怎么做都做不对的网站？就让我们 
从白纸、铅笔及一块橡皮开始。本帘中，你将学到如何在你一头栽人 HTML 编 
钳器前 聪明地工作。先为你的网站设想主题和视觉隐喻，用铅笔勾勒出草图, 
Pf 利用分镜表 i I : f 尔成为敏徙灵活的 Web 设计师。拿出你的素描板，我们开始前 
湖制作吧！ 


墘入桥 ？？ 37 










mark 的日本之旅 


你的 f 次“眵际”演出 

Mark 热爱旅行。大学毕业后，他在日本当了一年背包容，体验这个 
岛国 的一切 __从寿司到 武士。 现在回国了，他想记录旅途中的经 
历，请为 Mark 建立一个绝佳有吸引力的网站，列出他的日本之旅， 



在犮 *4 铁铋 ® 






謹 
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前期制作 



f 


形片段 


Mark 拥有许多内容，我们只知道他想要一个很枠的网站。 
我 f 门该怎么确保网站足 Mark 恕要的似不会浪费很多时间？ 




Tofcyfl 甲制批户 

：|1 


你将如何着手建立 Mark 的网站? 
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视觉隐喻 


编码前先想想 

前期制作 (pre-production) 就是在投入编驾 XHTML 与 CSS 前让一切正常。 
所苻这一切就是在纸上画出你的网站设计。这样，到了需要编码的时候才 
能确叻了解正在逑造的事物。以 Mark 的网站为例，我们可以先决定采用的 
构想，以免花了很多时间调整文字 W 图片的布局，最后才发现 Marie 根本不 
喜欢。 

前期制作也关系到让用户认同你的工作——在可以轻易改变设计的初期取 
得认冋。没存比投入了数天共至数周时间设计后才发现客户讨厌这个设计更 
槽糕 的情况 P 


从 视觉隐喻 孖飽 

想让网站看起來顺眼的稳当方式就是找出网站的相关事物。换句话说，要 
找出网站的主题 ( theme ) 以及如何用视觉手法表现这个主题。视觉隐喻 
(visual metaphor ) 就是善加利用熟悉的视觉元尜（例如图片、界面元素、小 
图标、色彩或字型）并强化网站的主题。 


假设你在制作稆聘网站。张贴工作的分区即可利用良好的视觉隐喻做得像典 
正的公告拦： 



3完成的闲玷作品利用欽本 
屑惑的公苦括砉材 以及便利 
站 (P ⑽ — ?0外 f 的导舦 
貌祕？ _招转栏”的 


^ohs an the Walt 只甭爱一个商单的 
招鸫（张坫25的）两站。你只乘 
一个生相 • 或件彳这括的上—咎 

辑助信 J & 9 


这个网站不是還加的公苦 括…… 
S 看起来弒保一个公#栏 & 
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前期制作 


清蜥的视资隐喻有助子 

强调网 站主翘 

-- 

假设你 tK 在创迮一个适合7至〖0岁儿贲的在线社区。就视觉观感而5， 
你应该会采用明亮、饱和的主色，配上卡通风格的界面元索与字型。这 
桉设计元素突出了网站的苽要主题^^面向儿童、存趣等。网站的外观 
的确能说明网站的内容。 

视觉隐喻的 范闽从 陪喻（使用色彩把设 i 十师希琪阐述的与网站主题相关 
联的抽象感受带给用户）到明喻（使用 K 接与网站名称或特性相关的图 
片一例如在 Rocket Ship Design 的网姑上使用太空船的图片 ） & 



0亮布你和的毯彩鸟儿极 
2超窜助设宕3这个网站 


卡冱企鵠鸟濩凾 
风格的字螌部 
注合较年幼的 
现众 C 


目前位罝 ► 41 
















网站主题 


主邏表现 J 网站的沟窖 

主题 ( theme ) —词用干表示网站设计世界中各种不同的事物——这 
让人很头痛。本例中，主题是指你的网站用途与内容,因此 amazon , 
com 的上题适 Nh 购物，主要销忾书辂。它的视觉隐喻使用强调网站 
主题的设讣元素（色彩、图像、字型等）。 

以下列出豇多±题与视觉隐喻合阼良好的范 M : 






钊建 4 稍送 g ) 杉， 这些图 
杉 苟用吁 网站设釾命爲他界 砺的丹 
运。公公9忍右#网站 主免的 ©杉 
外卖容器 © fJJ !) 用吁缚汊冏站名# 


Jcow8tt##(?t 的视党薛鳴不太明 $ , 
fS 议丹突 $ 了念们的子垮 、阇 
輩的©杉户油们的 ( 商 
籽）也甚对网坫名弥的适硅诠枉 




^YOTO 


i-IWi 1 /iJ^ IVto #V0^ 


04 




e 














fri- ^r- 




*^R 1 1 k.m 



Sihe^bAch & — 种为执(十用卢存 
阈玷 i ： 逬 H 谢试的应用枝序 。匕 1 ! 
jff sih^acb (银哲大獾獲〉 

种刼 沩. 所以采用丛林鸟大獲 

- j, « 


猱作为 i 蛭 


， } con ^ uUet^^ w Silvet&ack 的视觉眵嘀 & 
念们让两页看起瘅緣大猓獾的括 
钚琬， 值 用坫林逄凋.闷页谗叇 垂下椬 

L 2 有一个很珞的 £0 歼/©籽 - 拿赛 

J 该表格的太 猩獾。 也©此枋为"滋违队 
L 芍用 传刪试 (<^ueutU Usflfiility Test ) 0 


, +,i 


Sihrerback 


_pont,nim_i liwrtiiifeivs 

減 A-fc - j . 

UMvMRf TPninB VQTnMrW TOT 

dt«iflnifs«Hf iStwlopm. 


dHiflnMiiw omiopm, 

/ …嫌辦 
^ v*o*ot?npwWip*flnw*rt5i 
/ taMtNpMlpvit'tve^* 

為 Mdtii«pitmAHonV4*y 

/ W04f4V#i*V W^II 

/ Er^ortBOJMM 


DawitloAd 

广、 ir / n ， 




.'J, 
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前期制作 




磨笔上阵 


请看看下而的敘图。写下网站的主题，并圈出用干网站视觉 
隐喻的设计元索 （是的，直接画在书 上）。 谞记住，网站主 
题是网站的内容与用途，视觉隐喻则是用干强调主题的设计 
元素。 



h ,nn 
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分辨主题与视觉隐喻 



磨笔上阵 
解答 


你的任务是写下网站主题并圈出某呰用于网站视觉隐喻的设 
计元素。你认为各个网站的主题迠什么？以下是我们写下的 


注解。 

o 吮 m 摄承 a 个鹑法 
鸟舍沩有 Ha 



龟 、桃笆——郄是哉们 


■ -血 ;_~g i ~ - a-.i 




The Morning News 

■*_ -■ ii . i 4 丨 ■. Vr .■■ mu 




多秸铽斜的 4 居島拔紙类2苟，分 
指 i 抟排?士哒枝栈絝系桴 * 有整只 


有一指 & 


fAoznti \$ News 是个以游闻巧主的网络袭 

•!!■■•■■■•«■■«■■ ， ■■¥■ ， ■■ 咿 ■_¥■¥■¥ 1V«¥ ■» s IV l IT«P>fVVl •甲 V¥V 甲 P<P¥_9 9 ___>" 醒 | 

志。它的多栏鹐驸，类似报饫的风将以 

■ 轟 ■■邐 ■ -»■■•■■■■•_* ■«■!!•■ R»ll ■■警 ■ ¥■«■■■ 

芨简荦的设升部薙化7 新闻主 拯 & 


Aff 連用留佥鸟网格（ 5 以）的 
布易有如子突出斜闻主迓。 
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前期制作 


头脑 风暴： 遢尚视觉隐喻之通 


让我们回到 Mark 的网站……我们需要找出主题，并想出良好的 
视觉隐喻^不仅如此，在此过程中我们尽 M 不去思考网站所需栏 
数以及 Mark 可能会蒽欢的#航系统9 

开发视觉隐喻完全要崧头脑风發 认 K 思考容户的内容与受众, 
以及他们希帮在网页 t 看到的视觉元 素。 还要件事：别怀 
疑你恕出的任何构想或概念。只管写下一切……可以稍后再调稂。 


mtk 或 m ⑽ 

他钛袅你的客户 • …也 & 
你的老板! 



㊉ 騎: 




为 Marie 的网站来一次快速头腚风暴，并写下你想到的任何设计、内容或 


視觉元素构想#清记住.写下所有事物一你可以稍后再过滤不好的想法。 


mmm 


§下心中 s h 的— 

®To 


IT 0 trs 

C, 甚至忽轉迳衫与® 佟。 


Wrosbfuja 


T t he Palace 

flag 

^IJournal/blog 
I ^ h °fo slideshow 

F ^d me ^ 


Japawese pancakes 


i 


M | 

a 

i - 助 IbuyA 
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从头脑风娱到视觉隐喻 

为 Mark 孖崖主逛鸟视觉隐喻 

想出主题与视觉隐喻是件很 a 杂的〖:作。知遒了所需而对的内容，并有 
过儿次头脑风眾的经验后，现在该开始考虑表达内容的政佳方式.表达 
对象_是你的客户的用户 e 在决定强化 网站上 题的敁佳方式时，色彩、 
网页布局、元素位置都是1要的因崇。 

沾楚了解网站 h 题后，以 K 处你需耍做 的事： 


❹ 选择一些调色板 



挑洼鸟内容将釔电錡斿_主 
拷两站£通的毯衫。巧利用类 
似 http .// kuU \ , Adobe , com 的深务 

来違泛设毯扳 * 杳罨备神丞衫共 
同 ( i 作的玟采如何。 



使用©侈、©杉鸟立字，任网站"外观 

• P ..— 


拫掮内容来垆宠布曷 《 阀页 J ： 桴啟赵^ ， 
表汙你 t 龙铉空的都分趙多。 2 S 记疼 
留会 ( wfiitcsp ^ ice ) 的重屬 ft 。 你不用读 

谁荔一个係棄？ 


根据内容设计布局 



Cil 決鲒风暴蚤有帮助的郝分° 

你的构想潢箄，铥 出:& 钱筠谈沔站王 

通的表现无棄— 





袂赏陡噙俱舞常弗的袂贫负 
素 (^ 0 . 字型、__等） 
来強化押銥龙鏃。 


46 第2章 










— 笔上阵 


□ □□□□□□□□□□ http://www.pin5i.com/ 

前期制作 


为 Mark 的网姑写下两种可能采用的主题。然后稗想出一些 
设计元素（请记住，可以是字型、色彩、 logo , 阌标、界面 
元素等），这些元忐将为 Mark 的网站贡献很酷的视觉隐喻 
并强化网站主题， + 


©遊。 与 css 对叫得刊 


0 中心主题 


ik 


m 


A 


Q 界面元索 



■_ 


■ 



, 
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主题与网站元素 




磨笔上阵 
蘚答 


为 Mark 的网站写下两种可能采用的主题 & 然后再想一些设 
计元素（请记住，可以是字型、色彩、 logo , 图标、界面元 
素 等）， 这些元粜将为 Marie 的网站贡献很酷的视觉隐喻并 
强 调网站 主题。以下是我们写出的想法…… 


0 冬 aft 相吴阕玷的笵 ® 内 ■ 舦 a 夭 

❶ （ 

W 中心主题 

G 本涝记 0 本旅行指在 



让 我 们终碑 ( VWifc 的旄行 f 以及 G 本究免:& 
个什么祥的祕方 6 这# 内容也 珂秣成；6苒他 
人緦钊0 本旅行 时的资 ; g p 


❺界面元素 


搭纪大型图圬 的楛短 

Hi'iriiBAkAfi*Hifcl'!lil!bl' i fcB*Hh^lfl > HiFlriili , fcl^!fil' 


( Vbtfc 拍了不箝的採片, 
孖地秀一下！ 



0本地© 

^ O 本的地理非常轉跦 。这 

、—基我们9以丈 著淺用 视觉 


举一主导舭 



輩珐性 差兵链_ 歸级 
倂的内容吞砟很多轾旅沒 
的这录……®有一赵旅 H 

f ? 


孝-靡 



爲次祛礞荦鸽沒。戧 fD 的内 
容右的不足 fc / ■成入埒多倒桎^ 
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R 页元素塑逯视觉隐喻 

一 M 决定了整体网站的主题并开始思考网站想要的 
东西后，你盅要开始考虑客户提供的内容该如何陈 
列。网站布局的方式会影响你的整体视觉隐喻…- 
它支配了网页上可以出现与无法出现的事物。例 


如，如果网沉上只有一栏，或许就很难使网站“感 
觉”像报纸或杂志。但加上几栏后，就能让网 1 K 校 
仿一般报纸的风格——分格式、多栏的布局方式。 


褢分 S 。 


留仓 

用子分睜 ; ilL 4 
的英链部分。留仓 
g 秸有助号设丹, 


链趄利圭龙分 g 中 





iPhone ! 

’琴 

li a p -J ' h % | 

3 G 

S 4rai 嚙 # Sr*Fi L 

f …，… * 

Twice ds fast, Half the price. 

f*^*#rn*€ 

:; r-i-ril ^r'W^m. - 

Pk II ■ 

B* ■ ■ 11 ;:, ■* 

fihl Ufr^a^r 


物 _ 

'■: j ■■«! • m m v 

■"V? 1 m 气 i 

ggp 一 … 

^ M * r »*■" * 

Tyjt^ Wa x v» C^kd * 

Si : 

，胃胃 “ p --■■ ■ t 

™p-*„ *W(L *^a • «m <Ml 14 «p !；»■ • 

1 n Wsar ^ l^naq V 


_ 

用子起短趄和 
薄助内容。 


内瑢 

这宏老网否的 
® 尚.也遷来 
访着 4 我的 
0枝。 


毋螂 

0 常逢合放 1 版权信 
总和 链戏的5域。蚤 
达，资脚 S 波用子昜 
似 ©片 的内容。絮絮 
叻叨地 提供加 i 杨记 
的 ii 规内容。 


« 


k .i ^ p * . 


I 




iPhone 


_ K. ■, ■ 

I ■ rw-i 


Tit Hi!^ Ibf * 
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网页元素 


导航对子在你的 ra 蛣上©处洌这的用 
户而 書很重 S 。 这顼元素的设计，位班 
鸟沟 容邾会 吆乎间的方式来协助传达网 
蛄的主瓸 4 


0 




主体内容& 所布魔本崖生 
的摊方 a 在达里故进？来诂 
者想潘的由容。疙论由容昱®片、 
博睿丈亲戏是 Youtube 彩片，邾 
玎认故入由容主体^ 


0 


次 级导航 S 琬主导航彔目？的 
内容。通常，餃大> 餃 复杂的 R 
站才 tS 次级导航 


0 




iPhone 

3 G 

Twice as fast. Half the pnc 匕 


ill 1 C M' 


IS 


留白（也称为 negative space , 负空问）是 
R 站上各种进 i +元 素闻的 S 域 。 留© 帮助分 
播内容块， iiffl 户的浓鲭体忠， 稃孢 他们的 
注意力导向沟窖。 
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布爲中的页脚玎吆故5任何沟容.从 
K 杈 tt 惠 K — 份导航链搂》玎认。 
用户過#在这令分区辱找 R 站其 M 斑 
方没布刊出的雄後边沟容， 




^ m , ? .. 

X 沒舰舰 

Amrnm^m 




每个网站都霈要使用所有这些元素吗? 


答: 不用，这里只是示范可能会使用到的常見网页元素，请记住，每个网站都不一 
样。在每个案例中，客户的内容（以及他们的 主题） 将决定哪些 H 页元素会出现在 
最终布局上 I 事实上，如果你试图在 每个网 站上都使用每个同页元素，那你只会做出 
一个自己（或用户）看了也英名其妙的网站。 


问 


每个网站都需要主题和视觉隐喻吗 


视情况而定，不是每个网站都需要用到大 裎茲主 題的隐喻或华丽的报纸版面 
来强调其内容，但在大多数情况下，你的网站需要茱种主题，即使该主题只用于表达 


网站的内容与写作 I 请记住，内容是一种设计元素，能像留白与側栏一样使用 




问 


如果刚开始设计网站时没有任何内容呢？或者我想开一个博客或其他内 
容非常简单的网站呢？ 


答 


即使刚开始没有任何内容（图片、文章、影片等），你还是要决定网站的 S 
体主题。如果安做博客.请问你想发表什么主题的文幸呢？如果文章内宕比较接近0 
记，这就是你的主题，所有月站都有主题，即使主題是你自己， 
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完成视觉隐喻 





为了帮 Mark 的网站完成视觉隐喻，我们需要查看几种色彩与布局组合，看看这些组 
合是否能与内容搭配。查看下列布局与配色模型，并针对每种组合写下它们是否适合 
表达 Mark 的内容 a 请记住加入你在前一个练习里想出的主题与视觉元素进行思考。 



S & 0本带 ©朿 

的照片鸟室传广凄。 




璲巧柔 合明熹 透衫的 
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p 


僅用 S 适、闻扑釔逄方 f 
的三档布易。 


m 用涊±筘笆方衆。一 
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完成视觉隐喻 



9 娌蘚苓 


为了帮 Mark 的网站完成视觉隐喻，我们需要查看几种色彩与布局组合，看看这些组合 
是否能与内容搭配，查看下列布局与配色模型，并针对每种组合写下它们是否适合表 
达 Mark 的内容。请记住加入你在前一个练习里想出的主题与视觉元素进行思考。 



这些毯衫似呼;^太湟舍 0 本鎵行 
游记网站。 




虽然羊楛网玷的构逸很筠单，住不 
足 W 锊谈 Artarfe 从旅伎中带 © 来的所 
有肉容。 


苒栏4易祛供的空问应迮3经 
移3 • f£ii 个运衫找式仍然不太 
is 合。 



潢土秘诱汸案迳不铹，任扣对子 

■•iklAIAliklilil# ■ a>IH-l»-fll--fll-'fll--ll--ll'-ll'-PI--PI- i ri-VH-VIVI-Vl¥'IV-BV 

戧们的全姐而 S 有点蛣。 0本差 

不 a 


BVBVI¥l¥fr 


V ■ # ■ » 


a> 


4*4 
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_大珐£?本地©应磧很遠合诠在杉蛀这 
域 4 有人沄问我们的沔 玷的， 他不含你 
疑网芡的主磁鸟内容。 


这组布易岛笆衫的纽合菝供？！ 

!•■.■¥■■•■» •■ 警 19>_»4» 4 !!•«■■■«!■¥■¥■¥ ■¥B*T_V.VIf.TIV9VPT>flV«¥fl 

m Mazh 内容 Mf 的辦有空间它 


值用葡孝 炫括別 终设兹笆的■铯 

■琴，，》■■_， ■» 琴 ■.甲 ， ■ I ■■琴瞢 ■ ■■響 .■■丨圓》__琴_ 嚶琴 ■ 甲 ■■■_■■ • ■■■■__ I 

扳，这昨常这合奂 © 0 本。 


兹毯島主踣係得® U 采用的其铋笆 
衫绞方中伐 ■ 尤许戏 Cl 在族 S 视党 

无素 H 更有 & J 意 。 
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xhtml 与 css 模型 


为 Mark 建个怕缜 XHTML 模型 

专注干纸笔作业并不丧示 XHTML 要被全盘抛弃。既然经过深思熟虑得 
出现在的构想，就让我们用 XHTML 为 Made 的网站建立一个非常简单 
的模型，同时使用简单的 CSS 加上色彩与格式 6 

打开你撮苒爱用的文本或 HTML 编辑器，创建一个新文件； 


XHTML Stuct DOCTYPE 


<!DOCTYPE html PUBLIC n -//W3C//DTD XHTML 1*0 Strict/ZEW 11 

t, httpi//www*w3*org/TR/xhtmll/DTD/xhtmll"Strict ,dtd H > 

<html Kmlns= ,, http://www.w3-org/1999/xhtml ,f xml:lang ， ’’en” lang=’_en’’> 

<head> 

<title>Mark in Japan</title> 

<meta http-equiv= M Content-Type” content= lf text/html; charset=atf-8' 1 /> 
<link rel= u stylesheet" hreC^^screen,css’ 1 type=’_textmedia= M screen il /> 
</head> 

<body> 

<div id=’’wrap"> 

<div id=’’header_ r > 

<hl>Mark in Japan</hl> 

</div> 


链孩 f；) CSS 丈件•索 
龙鸟 £ d 个 2 辞放 4 阌一个 


0 录下) 


<div id= ,, content-left ,l > 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing ellt, 

nisi eget est viverra placerat. .. *</p> 

</div> 

<div id= M content^center ,f > 

<p>Nulla facilisi, Cras ac telius fringilla tortor iaculis</p> 
</div> 

<div id= ,i sidebar r, > — t . . _ .. 

cul> t Ma 成的 内窖） 


Pellentesque quis 


似内容（稍后枵瑀 


<li>Fusce diam. Pellentesque bibendum. Nulla viverra vestibulum just 。、 
Pellentesque pulvinar sapienX/li> 

<li>Cras vestibulum elit id nibh hendrerit eleifend* Pellentesque id ante * 
Sed volutpat blandit mi-</li> 

<li>Morbi at telius facilisis augue tempor pharetra, Vestibulum porta 
condimentum d\)i,</li> 

OClass aptent taciti sociosqu ad litora torquent per conubia nostra, per 


inceptos himenaeos*</li> 

</ul> 

</div> 

<div iWfooter "〉 

<p>Copyright ^copy; Mark in Japan 
</div> 

</ div > 

</body> 

</html> 



all rights reserved-</p> 


本入一苒个? l ) 表袅 个方错 
的主奩， g 以奉蟋不钧 
风格的内容 a 
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还有 CSS 


我们也将用到 screen , css , 一份用于表现 Mark 网站的简易 CSS 样 
式表： 

/* screen*css V 
body { 

margin: 0; 

background: #X12b63; 
foot-family: Georgia, serif; 
line-height: 1.2em; 


hi, p, ul { 

margin: 0; 么 
padding: lOpx; 




这费 无棄邾 共孳和 
用规时。 


ul 


ul li 


padding: 10px; 

Iist-style-type: none; 


margins 0 0 lOpx 0; 
padding: 0; 




移铨乇存清 輩的场 0 符考。 


#wrap 


洲 1 W 〜 0 仙如’ H 恕整个网站放在刮范器 的中典 

margin:* 0 auto; _ 

padding: lOpx 20px 20px 20px; 

width: 880px; 

background: #0b204cr 

border-top: lOpx solid #091a3f; 


fheader 


background: #ead9b8; 
height: 150px; 


icontent-left, #content-center ■ 
float: left; 
width: 280px; 
margin: 20px 20px 20px 0 
background: #fff; ■ 

#sidebar { 

float: left; 
width: 280px; 
margin: 20px 0 20px 0 ； 
background: #ccc; 

} 

#footer f 



clear; both; 
background: #ead9b8; 



所有 <仏> 括鸟 _ 楛 Ip 
值用 M ioAt t leit rr 声明来 
釗 it 三楛布易。 


綠係否 脚出现 4 錡笮 
分枵下 


} 
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最终浏览器模型 






毎合前萍丙的 XHTML CSS P 

L3 ㈣ 


0O© 


Markin Japan 


嗯 . 我不知坻昱盃舂欢这个三栏 布思的 

设计。 我希货 着到更 简单的东®。你知垅 

的，标超、莨®、一个側栏 # 类佩这稃的 

东® * 我也想着到一些甶苷设计。我实在 
着不出你想®什么 . ■•… 


sit amet, 
dug elit* 
si eget est 
tinddimt 
nunc, Nullam 
t magna. 

t sed purus eu ante 
rhatfis elementum. Vivamus 
bibendum lectus non nisL Sed porta^ 
elit co ague rhoncus consectetuer, 
nulla risus faucibus metus, a 
interdum purus justo at iigula. 
Suspendisse potenti.Aenean purus 
mauriSp aliquam et f varius et, 
vehicula vel, massa* In purus 
auctor sit amet，tempus sed, terapus 
noo^ sem_ Donee leo, Cras justo 
nunc, vulputate ut, tristique et, 
facilisis sit amet> area, Curabitur vel 
pede nec nibh condimentum 


oonscctetuer 


Nulla facilisi 
tortor iaculis 
lobortis peck 
a tincidunt p 
aliquet magn 
orci sit amet 
Pellentesque 
metus. Ut ac 
pharetra hen 
elit* Suspend 
arcuL Phasell 
Duis accumsi 
sagittis, risus 
tristique nisi 
Nullam laor€ 
libero quis ru 
Donee accum 
Maecenas co: 
Pellentesque 
metus. Fusee 
pulvinar euis 
egestas nulla 
massa vestib 


Copyri^it ® Mark in Japan ， all rights reserved. 
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_ 


c tellus fringilla 
n, Sed hendrent 
nitrides, mauris 
,augue el it 
Drttitor diam 
Juisque elit* 
is. Aenean 
mauris 
Nam sit amet 
itium gravida 
im porta lectus, 
la id hendrerit 
rut rum erat, ac 
non turpis. 
pendisse quis 
•lutpat phare tr a, 
lenatis pur us. 
turn* 

[uat pede non 
:udin f nunc nec 
eque enim 


Pellentesque 
bibendum. Nulla viverra vestibulum 
justo. PeUentesque pulvinar sapien. 

Cras vestibulum elit id nibh 

i • ' E. _ ■. - - \ a,, a _ r —一 - W . r f 乂 u 

hendrerit eleifend. PeUentesque id 

* 

ante. Sedvolutpat blandit mi 

Morbi at teUus fadlisis augue 
tempor pharetxa- Vestibulum porta 

咖 —entumduL 

Class aptent tadti soclosqu ad litora^ 
torquent per oonubia nostra, per 
inraptos himenaeos. 

- JT 


什么 f ? 你在开玩笑码 7 我坯 
tjC 为这巷兵子前期制作的工作， 

就是粟立刻 it 審户着到估晷螃的东 
西 f 




tassa. 



1 

_______ . 11 






I BBS—Bi 
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利用分镜表节省时间 




Joe s 不能 ffi 新使用一些已经完成的工作成果吗？ 

Jim ： 怎么用？使用我们的主题迆立另一个 XHTML 网 ! K 
吗？然后我们又会同到起点…… Mark 可能仍然不喜欢我 
们想出的作品。 

Frank , 但是就像你刚才所讲，我们还是有 个或许 可行的 
主题。而且我也不觉得这次的视觉隐喻应该全部作废，对 
吧？我们只需要给 Mark 看些不同的版本。 

Joe ； Photoshop 怎么样？我们可以在上而建立网站的外观， 
然后展示设计的 PDF 版本。如果他喜欢这个设计，我们就 
已经开始制怍网站所需的视觉与图像元素了。 

Jim - 在我们用 Photoshop 制作了一些设计样品后，也可 
以做成 XHTML 与 CSS # 这轲一堆工作要做，如來他还是 
不喜欢我们的成果，怎么办？ 

Frank ； 如果只是在纸上画出构想呢？我们可以画出网站 
构想的草图，加上一点色彩，然后寄给 Mark , 等他认同 & 
如粜 他不感欢，我们可以再画几张。这样应该不会浪费太 
多时间 . 

Jim ： 嗯……既然草图画在纸上， Mark 也 可以自己动手 
画， U : 我们了解他觉得不满愈时所追求的东商。 

Joe ： 这样子或许可行，这样,我们可 畫新使 用主题，但 
在纸上传递两种或三种不同的设计以供 Mark 选择。我喜 
欢这个想法…… 

Jim : 萆圈不…不定要非常洋细，对吧？只足就网站的敁 


终外观给 Mark 一个构想。 
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不倒代码， 使阁 分镜表 
开岌构想#节省时问_ 


前期制作中最艰要的事物之一就恐分镜表 (storyboard, 有时称为概念图， 
concept art) ,分镜丧用来把你的设计幣体视觉化。它们给你机会査看色彩间 
的互动，界而元素间如 M 相互反应、导航系统看起来的感觉、视觉隐喻如何 
呈现以及内容赴否以垴佳可能方式呈现等萌项，但是都不涉及代码。 

事实上，分镜表就像另一种级别的头脑风暴。你已经针对主题进行过头脑风 
暴，现在轮到视觉隐喻与设计元素了& 


社。 



别恸4饬的分铼表丄 -写房 
弓以扣 X ，飪记是4钗 i 測该设 







■■私 


邏 ■ iT ifffcJid!. 
■ ¥ 1 




fc J*-i' 


l? 




(■' m 



碁本的孕铪分德表 9 转変威打常// 
t 4 麵的网功 a 


试着在食令芻览粽窗 P 的箕锏品中 
创滹你的穸锛袠.运丧种 it 者户攀 
到你的抅挞在 " Web " 惟埭中垦珙 
的好方法^ 
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并非为你自己而设计 



别为了 f B 而设计 

淸记住，当你为客户设计时,设计不是为了你自己 
——是为了客户的耑求而设计 9 显然，早在描绘分镋 
表时就要开姶把客户的需求纳人考虑。让你的农户 
(就足 Mark , 还记得他吗？） 参 与设计过程很 简单, 
可能只是坐下來开个会、 诏他 们填写 设讣问 卷，或在 
前期制作过程中把初期的分镜表设计传给他们#。这 
样不仅让你逮立客户真正喜欢的设计，他们也会很商 
兴能参与进来。 

我们稍早想出的是我们自己#欢的内容，也仵 现在该 
问一下 Mark , 他想耍什么样的网站…… 
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前期制作 



我杳 f 在 R 站上的某个珀 
方有0本地©。它的 珀理形 
努实在太賠7 T 我觉得&法 
g 出现在 R 站上的某处 。〜 


我真的 SS _ 个谒栏 
式的简萆布岛，就係大 
宗港到的博害 一#。 


纽纽脑 

我们做错了什么？根据 Mark 的想法、你该如何改变我们在第54页 
提出的构想？哪呰可以絍持不变？ 
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创建一个分镜表 


为 Mark 劍建分镜表 

我们一起为 Mark 建造一个不同版本的网站，先在纸上操作。 
这一次，我们了解他更多的要求……一个 logo、 两栏的布局以 
及填入内容的空间。 

窣出一些纸。下面 是你需 要做的 ； 


O 找薄紙稃菡上 R 将 


找张纸 （8.5 x 11的纸张不错）并画上网格，或 
折出网格 & 你甚至可以用描图纸，上面已经附有 
网格。工整的网格在创建分镜表时对对齐元素很 
有帮助。网格也提供了安排网站布局的基础，使 
网站元素对齐、有序、有组织，能 U: 用户看起来 
觉得合愔合理。 



嶔们坍吁第 4 旁 



饵谟闲格 9 


你9以輪出空奁的闲玆 
器栺奈， bi 规察河站在 
窗 OcAtome 中的样 j 。 




© 菡出 你的设计箪© 

这里就是释放你内心的那个设计狂人的 
地方。编排你的网站布局，草绘 fogo , 
图片及任何想到的事物，网站使用的 
所有文字都能用线段或写上“此处有文 
字”的方块表示。分镜表的重点不是看 
到实际内容——是钯玩构想并决定最 
终的布局。 

点放在 i 龙夭素上，布不是杻诘 
戚 E 字铛掂 。 只龙给性的菩户兵今 
他们的网玷的基本柢念。 
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前期制作 


© 为分铳表加上隹彩#定索 

在你的分镜丧中加上色彩相当 m 要^—色彩改变一切^打开你的蜡笔盒，为 
分镜表添加色彩吧 s 尽管你最菩欢的粉蓝色可能不太适合用于网站，但这些 
色彩应该尽可能接近，以便想象出它们数字化后的交互情况。你结束填色后, 
加入一些细节——你卷！这不就成了一个非常不错的分镜表！ 



这就差分镜表加上洌羝 
器 cAwne 后的樣样 g 

g 竑圣在 a 忮中 tj 对客户展琛工作砝某的吋候 

让細 尽*錯 mi 寿 
范 c 甚至刁以硪客户句&功寻） & 





为 Mark 绘制两个分镜表。谞确保每个分镜表都符合他的需求，但又有足够的差异可 
让他选择。 
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最终的分镜表 



/////* 




rw/mm 


////> v ////"/ V // ■ 


IP ) : 我可以使用 Photoshop 或 A : 为什么不能在分镜表中加 1^) 
其他图片编辑软件来做分镜表吗？ 上文字？ 么？ 


添加色彩的最好方式是什 


答 :你可以用任何你想用的方式 
创建分铯表4重点是尽快建立设计 
构想的模型， Photoshop 当然更能供 
你掌控分铢表与如节、但也可能要 


答 : 在釗建 分铯表阶段，文字（内 
容）真的不重要《你的主要焦点应 
该放在较大的布局元素及 K 色方式 
上。在你设计了导航与信息架构后才 


^ :如果是手绘分铖表，有色铅 
笔就 已经足 够了，它们比马克笔史千 
冷、史能函出细节，而1不会渗透 
纸张， 如果你更喜欢用 Photoshop , 


花贤你史多的时间。不过，有数字会加入文字，现在，只要放入假文字我们也不做任何限制 D 


版本的设计，无论是在稃序中创達 
它们还是把设计图扫描进屯腩.你 
都能很快地把你的设想传送给客户 
检闳，总而言之，采用你最习谣、 
最有效率的方式 


(dummy text ,有时候称为 Lorem 
!psum text ) ,或是代表文字的粗线 


无论何神方式、重点是要 同单. 并能 
1现网站上线后的糢样 。 我们将在 
第5章进一步讨论色■衫，所以先别急 
着追问 ife 色的问题 6 只管尽力去做, 
然后才 f 看客户的反应 # 


有麋舰 


运暑戏们傲的另一种设 
佟 mtk 不 4欢。不过， 函; jj 

_的宪整分筏表 大栎只 
f 5 — 个士的。 


裁们 犯分统表廷右别兹器里， 
后的祥孑。 


达太好？ f 我晷砍简法的 
眩®,标® g 的0本搏 ©S 
是完其，迨不及待想潘 S_J 成 
果 f 


■ . _ - - 1 7 1 -f：\ 
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前期制作 



你的 Web 设计工異箱 

你应该做出了几个分镜表并掌握了不少设 
计技巧 ： 主题、视觉隐喻以及创建分镜表 t 


下 一步： 根据客户赞同的分 镜表， 进入数字化 


的过程。 





iiiwwwu 娜 ‘ 

Li^C 


___ _ 


«oo 


»在网站的前期制作时，你可 
以在纸上写出设计构想，这 
样可以避免编写代码的潜在 
错误，而过早投入代码可能 
会浪费时间与精力，或许还 
会浪费钱。 


为网站运用视觉隐喻时，试 
着采取潜移默化的手法，而 
不要过度处理 

分镜表是手绘的概念图，用 
来把你的设计化为可见的完 
成作品。 


■ 视觉隐喻调节视觉元素（图 
片、图标、色彩、字 型）， 


暗中强化网站的主题9 
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$ 组织网站 






“在绿色水塔那边左转 







网站导航大道有点崎岖吗？但凡讲到网站，用户一律很没耐性，他们不想浪 
赀时间#找正确的按钮 T 或在用 JavaScript 做出的三级下拉式菜单里艰难地前 
进。所以你必须花很多心血做好网站的导肮系统……而 J 1 要在进人结构和设计 
的步骤前做好。上一章，你为你的网站想出了很不错的主题与外观。本窀，你 
将以清晰的组织真正地提升专注力。结朿这-章时，你的网站将能够告知你的 
用户前进的方向井防止他们洱次迷路^ 



进入新章节 69 









仔细观察内容 




■ -: - 


« 

嚨讎 I ' 




»oo 


Cooyle 


Mcufe 兵的佟喜欢 
速£的分輓表所蓳现的简 

洁设也 


这些莩 ©« 起来不错。我_ 
A 的很#砍两栏布岛的设 
it . 续 下来氓 7 裁们会做出 
什么珉？ 
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组织网站 


在布爲1壊入沟窖 


在 Marl£ 的日本之旅中，他收集了许多素材 • 包括他拍摄的照片、写己，收 
集的纪念品（地阄，旅行指南、小饰品 等）， 莊至还布求像。但有个 大问题 ：这些 

内容该如何组织到他的新设计中? 


心 r 滅们 
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组织网站的信息 


姐织 R 站的儐息 

网站就造要传播信息。无论你的网站设计多棒或网站布局多么新潮，如果无法与受 
众沟通，它绝不会比一个言之有物的网站 成功。 

一个网站如何很好地传播内容大部分取决干它的信息组织方式。如果网站内 容組织 
不佳，就可能发生不好的事情——例如用户感到困惑而决定离开你的网站，前往其 
他 地方。 组织奐好（且合逻辑）的网站信息就是导航的良莠之别——决定用户能否 
快速且轻易地找到臣标或是惑到一头雾水。 


磨笔上阵- 

\ 让我们探索网站信息的组织如何影响导航系统。谓査看下面 

列出的内容块与右页列出的顶层导航分类，把各个块放到你 
觉得最有关联的顶层导航分类下。 
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磨笔上跸 


Tips 备 
Travels 


组织网站 


这费弟 fig 的内 窑讅出 
的分类 a 俅党得秄用喝？ 




举个倒子帮助备 

佳幵始分类。睽 
( PilOtC ^) 似乎 

属子 Mflifa Si 1 ) 

的 “Memoties 分 

^ *■***■ ? 
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模棱两可的导航 



磨笔上阵 
蘇答 


你需要选择内容块并关联到最适合的顶层导航分类0以下是我 
们做出的结果……你的解答呢？ 


这部分似呼很逐合旋 
£ M ^ tk 对旅行的&•名 


Media (多雄体）3 

常4指核片鸟录薄， ^ 

{S "Menu^ ^ ^C^renc^j 也不 

笔老得太达 5 此外，它们4技术 
1：邻篝*孩片 a 



Tips 备 
Travels 


(retting 

Around 


Hotel 

Reviews 

Places to 
See 



My Notes 


Food 


Travel Log 


Piary 


Memories 


Photos 


Post Cards 



这部分内 容大部 分用来 
帘助正在 o 本鎵行的人 


至榉稱的分类 . 伐 

仍4旋 f ^ 
课的明 ff 片岛—哆 
孩片的孖地方, 


r 


Media 


Menus 






嚙 . Photos 

的磘也 gw 兹 
到’ ^ W , V 分 
类 f . 
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组织网站 



模棱两可的导航系统让用户感到困惑 

考虑你的主要导 ■航 分类该如何命名很 m 耍，而且不该 
贸到设计过程的最后一分钟才决定，或等卷以后洱修 
改 。令人困惑的分类让你的用户很唯找到想找的信 
总.并让你的网站卷起來没有组织性、杂乱无章。让 
我们仔细审视 Mark 想到的顶层导航 分类： 



r … 



Tips 备 

Travels 



! ㈣ 亮. g 不代表 用户舴 移理喊 


My 



用户携如 何稍刑 ' Memories " 
(印 忆) 分 S 的内容 r 探蜉？录 

緣? Cd 屏类内 f 不差应该兹 
杏 Media — 下每, 



N \ edi ^ 甚个不错的分类洼场，佟 
你把睬玲 ( Photos ) a 
在 "Memoties T , 

(i Ui ， 变得虞身未明。 





磨笔上阵 


回到前页的习题解答，写出更好、更明确的分类名称。你 
可能需要移动一些内容块来匹配新的分类 


目前位置 ► 
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更好的导航标题 





磨笔上膊 



E 好的藓答 


清晰的顶层导航分类是让网站信息更容易寻找的关键。我们 
一起看看新的主要分类如何让网站的组织结构更为合理 a 



^ >逆免©惑 • iif 殓 
4—个分类 & 


Travel Tips 


frettlwg 

Around 


r 


Hotel 

Reviews 

Places to 
See 


4 * 


Tt avd Tips '* S & 笱点榉仗甚 
g fS 的子 MdTfc 棍供的内各 

连场 SCI 用。 



Food 


Travel Log 


Piary 


Tldvci Oiilty 

戌的分蛊下的内容 
类 f 。 



Memoties 苟点核後苒 g , 
ti 我 (D Si 用 Sc>Mve«i7〆 
(f5 念姦） u 校玲積 : iL 也 



Souvenirs 


Currency 
Collection I 


Post Cards 


Menus 



Media 


Photos 


Video Clips 


Currency 

ColfectioM 




Mewus 


ykotos " 现 4 卵类 
f‘J ^Media" 分类、 


■& 


憙个很好的分走， 
fS Cu^ency Collection ^ ^ 

f Menas 在该属 ■? ^Souvenirs * 
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组织网站 


有蠢醜 


分类名称多长才算太长呢？ 

理想婧;兄下,应该能找到一个词形容某个分 
类下的所有内容，很可借，事情并非尽如人意。原 
则上，分类名称越短越好（一两个词），不使用术 
语,而且越能说明内衮越好， 

1^1:但我知道每个链接的意思，这样不就够 
了吗？ 

枣实上.一点都不够，你并非为了自己建立 
网站，你是为了用户而建 主网站 ，你的首要目标是 
让 H 站上的信息可被用户取用，而且容易找到，如 
果来访者无法找到希免在网站上找得到的东西，就 
算你能找到，又有什么用呢？ 

导嫔标翹应镔简態、辗要, 
并 (序可鶬赇 pt &) 展映 
按卞錢暌涫垦班的 


1^)： 我该如何判断分类是否模棱两可呢？ 

令■- 有时候、判断分类是否模棱两可只需简单地 
自问：如果用户或访客对于网站内容或主題没有背 
景知识，他们是否能理解分类的意义？有些情况則 
没有这么問单，你需要后退一步，思考网站的整体 
内容。如果 H 站上的信息只是 赵强符 合网站主题或 
是稍微无关主題，你的分类名称将反映这件事，而 
用户也无法立刻理解分类内容。所以在选择分类前 
要仔细想清楚你的内容。 

闲; 如果内容可以放在两个分类下，我该怎 
么办？ 

^ : 当内容可以放在两个分类下时， 最可 能的情 
况是你没做好分类定义，内容应该只出现在内站的 
一个地方，想出五六种分类，分类间有足够的差別, 
不太有互相覆盖内容的情况，如果还是有问题，或 
许可以用卡片分类法。 

什么是卡片分类法？ 

^好问题。请继续阅读…… 


目前位罝 ► 77 



信息架构 


我乎碥定达个斩的沟容组织玎 [乂 
运作 ， 我还迻党得它泛组轵性。 



Jim： 我觉得这些分类还可以。这是 Mark 的盘见，不是应该盘 
接伞来用吗？ 

Joe： 这不足敁好的组织架构，但我觉得用户能找到浏览 N 站 
内容的方法。分类标题还是冇点模糊，粗已经比原始版本改进 
不少，我不觉得还能修改得更好。再说，我想动手编码了。我 
们不该把这么多时间都花在帮一个旅游网站想分类这种小事 
上 

Frank： 但这处#航系统的基础！ 

Joe ； 什么意思? 

Frank： 我们的导肮系统啊……大多数网站导肮不就是为良好 
的分类加上链接和子页而吗？ 

Jim : 我例不这么想。 

Joe s 我们还能做什么？我们已经改过一次分类——或诖航， 
就像我说的，分炎没办法 Ff 改苒了。 


Frank： 我觉得我们已经太深人过程，而无法抓出可能的问题 


yr ^% 0 导够箨豆 

在你的祖银上 . 

浼 A 喜欢绪成餌眯 
的导够谜項 . 

Joe： 趙立什么? 

Frank； 饴息架构 lh 我解释一下 ■“… 


Jim ： 你是说，耍从草图茁来一次吗？ 

Joe： 老兄啊……这样不就 M 到原点了！ 

Frank； 如果不从头再来，只足以完佘不间的方式来做呢? 
Jim： 例如说? 

Frank； 我们来姐立一个信息架构.而不足一堆分类^ 
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组织网站 


利 阁信悤絮构 ( IA ) 

维炉网 站的组织性 

信息架构 (information architecture , IA ) 只是一种手段，用于组织已经分成组 
的内容，而且这呰内容的分组对你和你的用户都有窓义旦合理。思考导航或分 
类有时会让我 f (1 过度涉人网站外观的问题。 


信息架构就是要后退一步， 典正 地普眼干手边的内容 
谐符 Krylon , —家受欢迎的油漆制造商的部分1 A 。 


巧你的 JA 加 f 吴杉 
砬方釦迮你处理的网 


琴 V ■ 


内容如何相互配合？ 



馆总 条构的 — 表现了可 
翁成巧 i 导叛的0录杉赶 


Krylon 



Home 


Products 


Projects 

Ideas 


Expert 

Advice 


My Folder 


■ 



Artist 




这合珪在某个 
0 彔铉蛀下的 
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卡片分类 


IA —卡 R 分类法 

究竟该如何组织网站信息呢？方法有很多种，最好的一种称为卡片 
分奥法。 

卡片分类法 Uard sorting ) 是既便宜又简单的网站信息架构方式。 
它也是个看其他人（甚至可包括潜在用户）如何组织网站信息的好 
方式&卡片分炎:法远离了 XHTML 甚至一般意义的万维网，让我们 
思考组织方式，而不是只布导肮系统。 


一个成功的卡 ft 分类， f 要: 


❶ 一奋 3 x 5 的卡片 
© -支笔与干净的枭子（或地板) 

G 关干网 站内容的全部构想 


巧备蘇卡片列个 
阇短、富描这伐 
的杉 ■抵。 杉拯应 
找反硤内容块的 
内 f 。 


妗你（或客卢）辱气今在 

网玷 i : 的备段内容站連— 
味粕卡片 。 




Park Wyatt Tok 

ft 飯店的信搶 


砝小事成汶的 内窖二 ^ 
空你的九赔， 

4 Q 织的问通。 


Vo 


论录旅程中遇到的 i ® 污与‘憑 
箝奄當物和餐疔。 



I”⑶工 /r 二: 

帘劢你©想起内^ *^ a 


Flip Video 

用我的 Flip Video 摄 

影机拍 T 的鐙柃。 




T 戧们喜欢僅用姨笆的素？1卡- 
\不过，_般佥焱梯钱的卡泠也 
一楫 符用。 寧贫丄- . 用 f 十么卡 
片郄没另系_ P , 逯钱 fil ： 面写 
孝秕錡了。 
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令挎分蠡真慯箝数 

本周 访谈： 

利用卡片分类组织内容？ 


Head First ： 欢迎卡片分类 (Card Sort ) ,你讲了 
很多关干帮助他人组织信总的事，为什么你会这 
么成功呢？ 

卡片 分类： 首先，我认为自己能帮上忙的主要 
原因是我让大家写出他们的所有想法——无论好 
坏。这样就没有想法被迪漏，你也不用试着在最 
后的紧急关头塞进内容。柯者，能够实陆移动卡 
片冇助于想象不同的内容画面， 

Head First , 有实际的宗西可以移动真的这么重要 
吗？听起来好像是微不足道的小祺。 

卡片 分类： 一点都不是小亊。这或许楚卡片分类 
法最有价值的特色 6 它不用花时间，就让我们能 
彻底 ffi 新思考内容与导航^再说，你还可以找别 
人来做 分类， 比较你们做出的结果。 

Heacmrst : 哇，我从来没想过这种办法！你通常 
都会找别人来做分类吗？ 

卡片分类：大部分时候会。能看到其他人的意见 
真的很有帮助。通常，找別人分类可以得到你自 
已不会想到的内容编排方式， 

Head Fim ： 太棒了。如果可以，我想回头讨论卡 
片。大家究竞在你的卡片 t 写了些什么呢?只是 
随机0出的想法吗？迅是有模板可以参考呢？ 

卡片 分类： 这个嘛……我不会说是随机肖出的想 
法。 应该把我的索引卞片想成内容块——你希错 


在网站 h 出现的内容。例如说，某人想逑立他的 
个人网站.他的卡片或许包括了 “工作”、 “爱 
好”、“生活照”、“假期”等条也可能列 
出更为详细的内容，例如 44 足球”、“迪士尼乐 
园照片”、“袓父母”等。 

Head Firsts 所以说，卡片可以是很特定的内容， 
也可以较为笼统？ 

卡片 分类： 是的，因为有些卡片的内容可能成为 
目录标题，有些则可能成为独立的内容块。主要 
_标是挖出你的头脑中冒出的每个内容构想并写 
到卡片上。 

Head First ： 现在听起来更合情合理了。我想再问 
最后_个关于卡片的 问题： 真的需要写上描述的 
短语吗？ 

卡片分类：不见得，但写了描述会更好一'尤其 
是你写出很多卡片的时候 & 没人想要试图回忆当 
初写下某个内容块时的用意。这比较与想法跃然 
纸上的方法有关。 

Head First ： 真是非常好的建议。今天节目 的时间 
也差不多了，感谢 Card Sort 接受我们的访问。 

卡片 分类： 不客气，很高兴有机会上节目讨论。 
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建立分类用的卡片 



现在可以根据 Mark 的内容进行卡片分类了。在每张卡片里写下一块信息和（非 常） 
简短的描述。描述尽最 精确， 写完一张卡片后先放到旁边——我们很快会回头处理它 
们，重复在卡片上写出想法的步骤，直到你把所有关于 Mark 的网站的想法都写出来。 
我们在右页提供的卡片数量可能不够用，欢迎使用你自己的索引卡片。 



㈣ 糾 本 ㈣ 仙个 ® 幸旅 
诱的人铽写3 —汾旅谗連汊事场。 


mQ ： r 








^^Wrwm 


ha'ik 英了 * ■"终 故路 i ?) 读秦 _ 洛 
0本各地。估夸媳: J 系寒1 
u 皂、彥榷，穿郝鸟桡洁 & 


( VWfc 奋 像趕 中经常恝到4 
食。姑蒂闳？柒荦， 

尝过的食#写5不少*诉。 


Mfltfe f 1 ) fi 何地方，拿由以衫 
机抬下说頻島孩片。 
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尚容 W 接越 




到 忘：? 加上®短描述， 
的和 S 内容 。 


— 






• I » # 


婶怕®出； fc 多卡片。 

班在'只管 fe 你的内梦 g 
勤卡片上_ 
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内容卡片 



9 理®答 


少5众多照圬- 
旅禮妖称不 f 


Mark 有许多内容。以下是我们想到的内容块。你想出其他东西了吗? 




landscape Photos 

瀾 ^ w 4 # _〒.♦囔 

埔市、 山脉呔 巷！洚益換 

■■嘤 ■匾 I + ■ ■ ^ ■"手 

埏方的篇3 &…… ……. ……… 


这部分芍以変威博菩，或许袅个 
不抟的分炎杉娃。、 


TfRVQf Pig^fy 



这是茱较巧特殊的卡辟■任 
溥司 4 Mmfc 的旅锃中基个重 ^/ X 
袭的部分。 


Restaurant Menus 


f • 者■署豢者署 n 者者者 ，礞違 者才 




P>W* 


M 蒹農。 __ 


R 4 r>fWp > 4 




' ， ，罗 H 8 *- — 酽 4 > 一 _ 


■尹 妒 一 _ rl rifl 4 g ■ 


Video Clips 

甲,,，琴， ，■各 

Mark 闲数码相机拍 7 的 
短^ 






gk /这 么说，整 
轻0本之旅。兵号襄舍的内/ 
容 t WlAtfc —玄觉伢稼嘍盈 。 


Activities 


H¥.^； k 在 ® 本“二 ‘■ 


Tokyo 


Mark 参艰？东京银塔， 
运 feU'f 查 nr' '… 


Sash/ 

籙苺烯 ■笔 iS ■扣铋窍_ ■ 
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Travel ^ 




既然 M^k 这么游 
爱異舍, 我们 想出 
5妨几个鸟食激相 
荚的内窖缺 a ©年 
把这个场0拆解徉 


Yooa Notes 

………… 


关子 5) 本瘃朽的瘥 
{ iL 鸟规祭 。 


Q\Aim 


義 @.•身 1 鎮线絲 p . 


Hn and Nightlife 

;«l-HI--ll-ll bri-Biilikl!iiliRI--ll--ll-BI-li>lEei-H#Hil--lil-Hii-lri!l-dl--il--li 

小窥东京乌窣都的潘吒 fP 

夜寒，後丸 ... . 


People Photos 


9 本最知名的几 
个域丰 。 咸许 g 巧苗个重茗 
域市写一味卡片。 


即馇你的谷 f 鸟戧们不也沒兵系 
我们枓在本嚎后玆邨分僅用这汾铒普 
中的卡 pk fs 也欢逆大索 m 用 t 3 想 
出的卡 pk 
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组织你的卡片 


把相兵的卡 S 分成 一 # 

所有想法都填人卡片后，你需要把卡片分组。毎:组里的卡片 
应该有明显的关联——而且分组应该有意义。以下是一点提 

示——这些分组最后将成为 Mark 的网站里的分区. 


丈化鸟 读言似 4逻; T ■相的 
闼合。这薄蘇卡圬应该放在 
同一金。 





请把前面做出的卡片分成有逻辑的组。如果有无法分类的卡片，没有关 
系， 我们等一下 II 处理它们。 
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为毎叠 卡玲取 个筒短 m 異猫逑性 的名称 

创边了组分后，你就该为毎个组取个名称。名称必须简 短鼓风 描述性 6 这些描述或 
许将成为主导航的一部分，所以名称务必锁定内容，但又能包含它所描述的内容。 

闲为你已经花了不少时间研究 Mark 的内容，试着想出与本窜稍早（第 76 页）不一 
样的分类标题。 



根据你在前一个习题分出的卡片组，为每叠卡片想出简短、具描述性的标题。你可以 
使用已经写好的卡片或另外写一张新的卡片用于描述组的名称。请于下列空间写出你 
想到的新分类。 


■9 r ■ n i B ■■ r ■■ ■■■■■•■ ■ ■■ ■■ w n 丨丨嘗鼉世矚 ^ • 


拍卞你的卡片穸类痒笫妒及洚 
衣祖银卡片的方式。_盾可於 
參 考适浓照片，把卡片安拚成 
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选择分类标题 



薄答 


在这个习题中，你霈要把卡片有条有理地分"叠”组织，然后给每兹卡片一个最能表 
现其中内容的名称 s 




_ 




m « 




戧们善欢僅用另_神颜笆描 
注分类 & 你不用 保殘韪们的方 


Media 


Landscape Photos 


蟀， 二生 挣味昇见辛托」 

烯.親,. . . 


Video Clips 

▼ ，^ ， ■ ■ , ■ * ■ 令函 * 争科甲酵+ s * ■ ♦ _ ■ ■ ■ + s 4 ■逢 巍 a p s ^ _ 骨拿 

Mark 歡碎姻 酿駐轉 

4 p . 

* I m Q > a- S + ■ rii ■«■ di ii ,1. . . 


People Photos 

Mark 在旅途中 

朋矣的照片 。 


Restaurant Menus 

Mark 在旅釋中©处 9 餐！ 

涵 [二 :二: ■………. — 


Food Hofes 

Mark 对-路 上箝有 食插和 


这發鉍寻係坊 s 属子 

分盎。用户汆年 ■ 

望4这个分炎下找妇 拔内 
和录溪。 


萆來我们有； T 少兵吁食浼的内 
容块。 Ci 墊内宕可以成与轲站 
上的有_分5 3 


SwW 

鐵觀::_ 与 


Activities 

，+ ■警 . ， ■ , # 嚅 士 ■ ，■螽 ■ 

笮華 .鲍 A 在0本 的毎二 

_ *’**-*■**.*"+.-， Li, * 


泛薙卡片衧偉; P 属子仔何分 
类……芩一下爲钍理达 
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Mark 参艰？东京锋埽. 





埵毎 m 魚 H … 


Hiroshima 




奄夺； 藤行 的见闻 


fravd Piary 

■h ， S n 一 m 


Mark 在 


U 的 


0 


ii # 或许基傅睿或 4 线 


译言和 x 化&很好的铂 
合^ fSl , 这甬场内容 
秕足以禕起整个分 S 了 
喝？ 


Guttinre 


義 @ 与？年，辞 HH-. 


Leaning Japanese 


0 丈琢 


物 uf Japan 


Pars and Nightlif e 

■ •■ ■ h n ■ ■ ■< >■ ii ■ ■ ■ ii i «• ■ iv ■ ■ ■ « B * i b ii fa * i # i A ■ ife b # H> b ■ k i ■■ i 

小窥东京鸟京都的漭吒和 

g.,■■■■■■■■«■ ■ n .p b ■ ■. iB n ■ ■ ■ !» ■ >■ ■' in ■ ,■ ■ v bi ■ ■ i；p b ■ ■■ ■ ii ■ si si ■ ' 

yh* 决 

'i :r -a r ■■ ■■ « r ■ vr A i «**■■■'■ is v er 4 ■ ti §■ ■■ t- ■■ r -I; r h r -i r -■ ■«< ^ ii 1 r i 1 


另一蘇*家芍卯的卡片 
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无家可归的卡片 



暫佟— 7 。我布好; L 弗卡 R 设 
办法纳入任何组，该怎么处理 
达些卡圬嘹？ 


无家可归的卡片强迫我们 自省： 

“真的需要这些内容吗？” 

冇时候，你会发现一些卡片无法分入任何类——它们被称为孤儿卡片 
(orphaned card ). 你可能觉得自己做错了什么唞， 不要担 心。这些孤 
儿卡片通常是做对某件事的征兆。 

孤儿卡片分成两种。一种无法域干任何一敌卡片一^不过你认为卡片 
内容对网站很 ffi 要，所以为这张孤儿卡片创逑一个新的组 。 男一种卡 
片同样也不厲于任何组，但再怎么努力也无法根据它创趙新组（姑且 
把它称为其 IH 的孤儿）。在网站的信总架构里放入无家可归的内容只 
会函扰用户。 


如果说.你家附近饮品店的产品区里有一堆烤而包机、一大片陈列牛 
肉干的 E 域以及一而墙的除臭剂，去买东西的人一定很困惑。人类与 
周围环境互动是基于可预测性 (predicatability) m , 除级剂（成烤面 
包机或牛肉干）根本不该出现在产品相同的道理也适用干网站信 
息的组织。如果内容随怠出现在网站上某个让我们觉得不该包括这部 
分内容的分 IK， 我们 也会觉得奇怪——对这个网站的使用体验也会受 
到负而影响 


所以，改怎么处理孤儿卡片？你有两个选择。第一种，改变内容，让 
它能归类到某个组中。然而，这项策略多半不会成功。另一种方法则 
是接受这个内容不适合网站的車实，然后把它丟掉。 






, 





■ ■ 


Activities 

垮！ .! y |? r . M 曰本的 

n … . 


Pars and Nightlife 


小窺东京与京都的酒吨和 
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为什么我们麥数分类珉？我试为认闲 户为中 
心设计的重点昱##为§ B 设计， 布昆为 用户 


设计 


O 


o 


朋友不会在分类时丢下你一个人 

到固前为止，你只是孤零零地一个人做着卡片分类。但 
自己分类并非做亊的唯一方式^为什么？有个不错的理 
由：你并非为自己而设计一你是为了你的受众而设1十！ 
旣然设计对象不是自己，为什么还要自己做卡片分类呢？ 

理想中，你要用完佥一样的卡片做分类'^"但分类由他人 
执行。试符从你的0标市场里挑选一个人。如果无法从 
H 标受众里找到人.请征召其他人帮忙。至少，他们能 
提供关于网站信息架构的第二种观点 


组织网站 




找个朋友帮忙分类你写出的卡片。给他们简介一下 Mark 的网站（注意.不要影响他 
们去选择相同的信息架构），然后请他们组织你的卡片。他们的分类方式与你的相同 
吗？他们做了什么不同的决定呢？请询问原因！最终目标是为 Mark 的网站产生信息 
架构，且信息架构不仅满足网站（与 Mark ) 的需要，还能满足用户的番要。请至少写 
下三件你从朋友的网站分类方式中学到的事。 



再穿出饰聆 柞机吧 /你班在应该有两澉舜食 
方 同的柯銥祖织照片3。 
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整理你的卡片 





eople Pho- 

to^U 


Media 


i Landseai 
! Photos 


Video Clips 


看看我们的朋友如何帮 Mark 的网站做卡片 分类: 


3 瓸解苓 


Culture 


About 




这金的结 

果—样。 


Menus 


Fooi ^ 
Motes 


Sushi 


Pars ^ 


Nightlife 


Hiroshima i 


travel 


Ijl 

Flaees 


我们的朋蛊把 artd 

^i 9 hdiU rr 加入 3 

-Poor It. 


W 包抬了禺个蜮 
丰的相关内容。这转分 
走頻有遷理 • 布 fl 或埒 
钵^网玷整体形威吏耔 

的分类 3 


Activities 


M Di 叫"岛 Activities' 

基舐儿卡片 。 



何种卡 ft 分类才正碥？ 

取得第二种卡片分类结果非常迫嬰，而且通常形成我们一开始没想到的 
组织结构。但我们该怎么知逬哪一种分类方式更好或是哪一种方式应给 
予更多比贡？这些问题就要视情况而定了。如果五个朋友都排列出相似 
的卡片分类方式——这样极有可能就是组织网站的最佳方式了 

不过，你才足网站设计者。有时候，你只需要参考他人的意见来调整原 
本的分类结果请在完成分类时，确定你满意网站组织的方式。毕竟， 
你（和 Mark !) 将与这个组织方式天长地久地相处下去。 
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抱卡 ft 棑列成 R 站的层次 

对卡片分类的结朵与标题感到满意后， 你需 耍定下一些网站结构 & 把卡片 
徘列成网站地图的样子 & 傘起剩下的 3 x 5 卡片，写下刚才想出的组名称，再 
把卡片铺在必子上。然后，把每张 w 内容”卡片排列在适当的“分区”卡 
片下 & 


你（也就&仿拯 ） & 


-张代 袠整钵 S 
枒蛀的 新十片 a 


把分祙表放在孚这供参 A 
考，它苟助子聚该闲玷的 

4体主趑。 





o 

II 

t ,, 1 


ML » V ■ * * 1 " ^ p ■*■ ' ^ B ■ 

1 

! 

! 

L 

i 

ii 

i :. 








习通 


做了几轮卡片分类与请朋友帮忙分类的循环后，请把你的卡片排列成 IA 图并拍下另一 
张照片。 


0 

安 

.JtT , 

f/f 

i 卡 



请子 
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卡片分类组织 



9 鑷蘚答 


考虑过朋友做的卡片分类以及重新思考原本的卡片分类后，我们得出如下的分类布局= 


栽们貪掉卡片爱的描 
这样对敍赛进—英中…… 


Mark in 
Japan 


用子 ( VU 4 的网玷的 


Media 

-t>V " i r I 



Travel 

Motes 



About 

Japan 


Landscape 

- 

Food 

輪 to$ 

Notes 


People Pho¬ 
tos 


Restaurant 

Me _ 


Tokyo 


Hiroshima 


Travel 

Wary 



的瘃行 CHS 将 
苟威於宪奠的博菩。 


Culture 


Language 


Soshi 


属子 Media * Q 


• 匕 . Ji .，… — ■一里 . i II I ii 

Bars ^ 

Nightlife 

— i™ .彳丄 u._i_ ' 


Video Clips 


c 

\ 照玲鸟录薄绝对 



戧们鈞喊丰俘留一个 
分类， fS 将分类 枒延 
援为 "TMuet Note〆 

这徉 S 骷表矛 卡片分 
类的锘菜。 


栽们路 "Bdis And ^ifhttiU 
加入 ©f 烟皮 
们部把它分约 M?ood " 


巧， M 盏麵 把文化 和讀 
^女到杨同的分类下。 
这个内 容块枵 基不错^ 
0本槪扣純理 

H h 璆用子灰入赖外 
内宕的 S 沒 L ^ 
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IA 裰 R 是菡在紙上的卡 Rf 分类 

IA 图卷起來非常像我们在前面的练习中在“桌面上”创迖出（与 
拍下来）的网站地图，但它苻更多的含义。 IA 图不仅仅能显示网 
站内容的组织，还可以显示内 容分区 与子分区的层次关系。好消 
息是，因为我们已经花时间做了几次卡片分类，这个阶段的大多 
数 I ：作已经完成了！ 


Media 


Food 



Landscape 

Photos 



j 


Video Clips 


Mark in 
Japan 




Travel 

Notes 


W...MU ,1 


Tokyo 




的网玷的部分 
卷起来根薄我们牴的十片 
分奘结果， fS ^ 些 ㈣ 


Q 


kL 的内容在扯劣略/ 



璜把 M © 採#卡片分 
类的最終定 f 结果 & 各 
个分类破3仔知祕分箱 
杉超則依伐跗存_ ’ 


People Pho¬ 
tos 




我们怒分成再 
个子分 S ， 4姿1遠合 
的 内容。 




锏作最鈐箕稿的 w 障时, 
饿旁必体胰重要怛弟拼到 
标越的顺疼。最重要的填 
P 应镔出现在 w 辑中软 
第的蚰方 。 
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iA 图不是网站地图 


1 A ©#非只是 R 英间的链接 

IA 图的重点不是链接一一宽点在于内容分 E 与子分区间的层次 关系。 如果你试着 
创建一份呈现分区间链接情况的图，你将会得到荖无用处，苻起來像而条一样混 
乱、无法提供任何关干网站内容 间的重 要层次矣系的信息。 


这么想吧……大多数网站上到处都有链接.链接兗越了内容分类与网站分区。克接 
画出来，也将是一个乱七八糟的 IA ! 


如果 IA K 是键狻 




〆 


Media 










**■ 


Food 


Mark in 
Japan 

I 

_ y 

travel 

Notes 


索？ j 丙将布 a 侖网站 
笛个主页 6 链接。 



Video Clips 


SiUnus h- 


Tokyo 


J 




People Pho- 

tOS 


Sushi 


t 


JL 


Hiroshima 



— 









Landscape 

Photos 




— 1 


<c 



傅客 g 链 金铤拉 釣旅 
a 笔记島多遇体 


Matk 的网站芍秸各 
处邾金链4 揮辟 
鸟录像。 



舍物相关网否弓秸链掂 




有许多流程图可以帮助我们创建看起来整洁专业的 （ A 图。 
对 Windows 用户而言， Visio 是不错的选择（虽然价格偏责）。 
对 Mac 用户而言， OmniGraffle 则是很好的选择^ 
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匁通 


基于你的卡片分类结果，请为 Mark 的网站建立一个 〖 A 图，记住，此处并非呈现网页 
间的链接，而是在表示内容分区与子分区间的层次关系。 




增加内容块- (2 

让 Math 的网站更 
有鉬铒，到害佾坩 
加額外的子分类。 




則忘记为你的 JA 
ffijfei 每杉 




Vklim . 泰变琢祐的 
构想 c 
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IA 定案 


M Media ” 甚最切$*最容务 
分迤的分 S 。分 ft 录法鸟 
陵 f 4 将於 ^ Media ^ 分 S 带 

^更多30识性 fl 



你的工作是根据卡片分类结果建立一张 IA 图。 以下是我们的结果: 


S 

Zc 

m 

s 

mmmm 

: K 


敍们把 ft Tok ^ *, 

H 1 d 

Hhos / wm / —起兹 

4 u CiW ’ （砝丰）分 

5 T - #把整个分 g 放 
存 * Tlaviet Notes ** ~f ^ 这 

祥苟巧留下坩加更 
多爯戗主屘的空向 B 


imwm 


J 



3 屬薄芩 


iSf ? A ^ 表加 
t 窠杉■通。 



CP 

1 2 ： 

s 

n 


^ IlJ 


律吝左该昱网坫 i 的弟—个涟茲。它龙 
大多數訢内容 出现的 S 俄，甚5敍成灼 
索到资的一部分。 


SSBU JS 

L— ^ 

1S 


Mcsd 

4 SS 







alA 



的 o 

m 

——BRISg ^---- : . 

i£ 

adssp 吾 * I 




csfs 


SS2 

lcsu 


oirql 




J0ZP0I2 


pots 


F 



t 


§M 

Mlvi 
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n ： 只是为了导航分类，真的要做这么多工作吗？ 

如果你想做出正确成果的话，对，就要做这么多工 
作。内容和导航的设计需要杲种戏度的思考_设计仓促 
的 IA 对网站的成功可能具有致命的影即使是简短、快 
速版的卡片分类与 IA 图，结果还是可能比什么都没做好， 

1^：如果我想直接跳到 iA 而不想做卡片分类呢？ 

^:有总比没有好，但你将无法緙选和审核内容0卡片 
分类的重要性在于它能协助你排除不重要的内容，并让你 
思考内客块如何彼此关联 〖 A ® 可以帮助做到这些，但没 
办法像卡片分类一样仔細《 

N :如果 1 A 图不负责虽现网页链接，那由谁负赍？ 

^:大多数时候，网站地 m 是呈现网站上可用链接的最 
好方式。这个方式的问题在于网站地®需等到网站完成后 
才能制作，在前期制作期间，你应该聚焦于内容的组织而 
不是链接的建立，链接的工作将于开始建立网页后出现， 


i 所有网站都要经过与本章相同的过程吗？ 

^:实际上，大多数网站 5 r 能都没有这样做一一所以网 
络中才有那么多难以使用的网站 a 在绝大多数的情况中， 
IA 与内容组织是设计后才思考的问题，因而造成难以使用 
的网站以及很难找到内容，跳过前期制作只会带来泣丧失 
的用户与日渐减少的点击率 （ hit ) 。 

1^1:网站主题该如何与倍息架构关联？ 

^ : 〖 A 其实直接与你的网站主题相关联 & 网站的内客是 
整体主题的驻动力，而内客的组织相当重要。如果 1 A 很差 
或 IA 的焦点放在错误的内容上，不仅仅会让用 户困感 ，我 
们也无法想出主題 D 
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移向实际生产 



I 


Language 


从前期制作移向奕际制作 


这么多准备 1A 与卡片分类的工作却只用在导航系统上，似乎有点小题大作 D 不过, 
Mark 将万分敬爱你，尤其在他的用户能轻松干网站里移动并寇无问题地找到想要的内容 

我们现在有了组织良好的 IA、 一份 Mark 同意的分镜表，还有网站目标的清楚方向。让 
我们开始打造一些标记与样式！ 



Mark in 
Japan 


» =& " — - «, ti, - rx :. r IH »r ■ ■ — 

Food 

! Media ! 






images 



About Ja¬ 
pan 


囀 rw i p 


Culture 
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建交 Mark 的 网站 的鍺构 
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值用的 


□ 


/images 


这个 i 4 夹埒锌存进行布 
要工 (If 5的所苟©圬。 



index.html 


@是给大多蛊 WW 屎务器伎 
用的麩认⑴ 7 WL 2哼 3 也袭 
戟们的主贡。 


这个 丈4 夹将铭存: a 们值用 
的所有样式表 ( CSS ) 。我 
们观4只 有一汾 样式. mo 
菜 0 后想添加的打印 
迓备鸟桴劫徂备 的支荈 时， 
則芍以故变^ 



/stylesheets 



screen.css 


用予屑 单锣你的 
狀认样式表。 




Wf 甚本丰推下來布 
含值用的0录结构 。 
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建立 mark 的 xhtml 


先创建 index.html . 

sf 

<!DOCTYPE html PUBLIC ,T -//W3C//DTD XHTML 1,0 Strict//EN n 


州狐表表保不会 S 在杉记中餘 
偷 f ! 用 < center > ^ < tont > 

你含很好地分龚内容鸟样式 。 


"http ： //www-w3-org/TR/xhtmll/DTD/xhtmll-*strict ,dtd ,r > 

<html xmlns^ ,, http://www,w3*org/199^/xhtnll ,, xml:lang- rf en ,r lang™ ri en"> 
<head> 


<title>Mark in Japan</title> 

<meta http-equiv^^Content-Type 11 content=_’text/html; charset=utf-8 , * /> 

<1 ink rel=,’stylesheet’ 1 href^^stylesheets/screen^css' 1 type= rt text/css* 1 media^ 11 screen 11 /> 


</head> 

<body> 

<div id= ,t wrap ,, > 
<div id= M header 




> 


命名务"卿 〆 的 < AV > 是辦奇为容的 

容器.可处我们钯网否移到到锫器宗0 
的中阅。 


<hl>Mark in Japan</hl> 
</div> 

<div id="nav ,r > 

<ul> 



导换 S 只爰—个任用我们在前期利 
ft 中想出的杉磁的乇序的表。 


<11 ><a class^^active ,f thr 0 f™ ,, # tl >Hcme</a></Xi> 

<li><a title-^Travei Notes 11 href-'^'^Travel Notes</a></li> 

<lixa title-'Tood from Japan" href- ,, # ,, >Food</ax/li> 

<li><a title=’’Photos and Videos' 1 href="# l, >Media</a></li> 

<li><a title^^About Japan 11 href-"# 1, >About Japan</a></li> 

</ul> 

</div> 0SL 暫的 用戗丈 本成入内窖鸟 

<div id- ,1 content ,, > 

<h2>31og Header</h2> ^ 


<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque quis 
nisi eget est viverra placerat• Nam tincidunt Xigula id turpxs, Duis nunc, 
Wullam imperdiet quam ut magna,</p> 


我们在倒裎这值用另_纷乇序 
列表来帮助钼织为容 6 


</div> 

<div id- M sidebar ,f > 

<h3>Sidebar Header</h3> 

<ul> 

<li>Fusce diam- Pellentesque bibendum. Nulla viverra vestibulum justo- 
Pellentesque pulvinar sapien,</li> 

<li>Cras vestibulum elit id nibh hendrerit elelfend* Pellentesque id ante 
Sed volutpat blandit ini*</li> 

</ul> 



</div> 

<div id=_’footer n > 


<p>Copyright 
</div> 

</div> 

</body> 

</html> 


&copy; 


Mark in Japan, all rights reserved*</p> 

\ 劳娜这给戏 fH 赶 I 更多铉 

泛患, 历踯仍然在 i 衮 
的 " map " < di v > 里。 
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爯創建 screen.ess 


/* screen*css */ 


body { 

margin: 0; 
padding: 0; 

background: #026dc0 url ， / images/bg.gifM 
font-family ： Helvetica, sans-serif? 
line-height: Uem; 

} 

hi, h2, h3, p, ul, li { 
margin: 0; ~ 

padding: 0; \ 你巧以杏一条規則中声明多个及 

p, h2 f h3 { 

margin: 0 0 lOpx 0; 

} 


repeat-x top 



f 个 tfS ) 圬尺寸#宠 

* 45 ° p ^ 图 片子沔迈的; t 軸 
I 现 t ! J 異 m 的湃变豉果 


ul { 


} 

#wrap 


list-style-type: none; 


margin ； 0 auto; 
margin-top: 40px; 
margin - bottom: AOpx; 
padding: lOpx; 
width: 730px; 



< div > 的圭 菜样式 f ， 

括 fOpx ® 的 i 5 桮，设定泠 " 0 
aut ^ 的这 界.苟 把闼贡放在到苗 

器的中與。 


background: #fff; 
border; lOpx solid #044375; 


} 


#header { 

background: url( r * Vimages/island _ header.jpg 1 ) no^repeat; 
height ： 250px; 

} 

theader hi { 

padding: 30px 0 30px 30px; 
color : #fff; 

background: url(■ "/images/dot.png’ ） no-repeat 10px 50%; 
font-weight: normal; * 

letter - spacing : - Ipx ; ' <6> S 的杉通的猗采 • 我们伎. ^ 

} 用 ess 移劫殳本的怊斿把妓毯的®魚4窆妁 


► T 英待綫…… 
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再加上一点样式 


继续创建 screen.css 


#nav { 

margin ： lOpx 0 0 0; 
padding: lOpx; 
background: #044375; 
border-top: 5px solid #033761; 

} 

#nav ul li { 

display: inline; 
margin: 0 lOpx 0 lOpx; 

} 

#nav a { . 

color: #fff; 
text-decoration: none; 



#content { 

margin: lOpx 0 0 0; 
padding: 10px; 
float: left; 
width: 505px; 

#sidebar { 

margin: lOpx 0 
padding ： lOpx; 
float; right; 
width: 225px; 

} 

tsidebar ul { 

margin: 00 40px 0; 



的召叙系统 o 遷一个 泛斿判 
f ■ 5现_ 嵌形式; ? 不差块形 
^ di$pu ^ inli ^ tr 电3 3这场 



的子铯戏光棄，饬必领另行设 
宠它们的疤衫。链戏不含认 k 级 
的 < div > 或 Jt 佔无 f 扠译笆衿 

说定 • 



内容島側桎分糾侖在馋刼和命右 
rl ih t 内宕 无棄泠 2 / 3 宽度，制 
括 无棄的 f / 3 宽度。 


#sidebar h3 { 

padding: 5px; 
background: #eee; 
border-bottom: 2px solid #ddd; 
font-weight: normal; 

} 

#footer { 

clear: both ； 
padding: 10px; 
background: #eee; 
border-bottom: 2px solid #ddd; 

} ^ 

g 亨俅潢铨 （ d « i ) j ^ 

r 從 



r r un 别担心，这些代码都能从 

Head First 的网站下载。 

实际上,你应该下载整个网 
站。我们也提供了所奋图片.让你的设计与 
啪 本上的图片一样棒。你也能冇到 Mark 的网 
站，并与你做出的版本相比较， 请至： 

hea dfimlabs , com/boo ks/hfwd 
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»oo 

—fc La j 

- 


Mvk lA|«p 4 n y 

[ 4 1 

►J 

fc\ 


l±] 

Iftj 1 


网站卷起柒係待 
葙 fl 有个含理 
的 JA . 不 会在将 

来 造成问 拯。 


Mark in Japan 


Travel Motes 




W /腳獻 


About Japan 


l^rm ^4 


Jfe # J I 我垃不急待要 IB 内 
窖敖上去，昜 R 站浪 t 劫起 
来？ f 谢谢犬痏 f 


Sample Blog Post 

(fOfOf sit amet ConsecftetLier adEpisdng^ii PalkHitasqu« 
p^a»ret_ Mam tinddunt liguia id tu/pi^ Dul& 
lit magna. Suspendi^se sed purus eu 
blbendum Pectus non rtiaJ, Sed porta t 
r. nulta ri$u» £aucibu& motu^it 
Suspend tsse potentL Aenean ptrrus 
,vsh^cu^a In pgrus Epsuiri, 

ernpu& non, somL Donw loo. Crasjusto 
fad!isjs s^l &iOj r Curabilir vef poda 


coAsectei 


■sit amd^ coAsedetu^ 奴 sp^sd^g etit Pflllentesque 
Aslvivfirira ptacerai Nam bndd^it Inlaid turplt. Duij 


这个网站卷起来 
很像 Matk 旬兹的 

分岐所 fcf 我 




Sktebar Heading 


Fu?oe p 卻糾始 

bihandum. MuEla vivifra 


vftsbbulum justo. 
paJvinarsapiefi. 
Cms vostibulum 


PfitlftntosqiM 


Cras vostibulum sNt id nibh 
hdnddwit (rioitond, 
Peltenls^quo kj Ants. Sad 


Sidebar Heading 


jf 


隱 S > 


105 
































完整的制作流程 


0 进行卡片分类并创建 IA 图 




_ j WMSlj 

^ K : ^% 一 j _ 

1 r * .I %-. 1 

|«_ 一柄 _ k ft?^l( ^vk^MtnLr^ 


Hst« i^w* ^ ^ 

$.M mtiBWt 1 (« 



OpVMu 

ci^pa Atmi wv 
Hp^)Aii€mm. 



O 为内容加上标记，并以 css 制 

作样式 a 




iw *： 


P^H I 


■ 角 ■■*■ 


ii >* ■雇 


•lab* 


从前期制作到实际 制作： 完螯流程 

o 收集所有内容。 © 头脑凤暴，想出主题与视觉 


隐喻。 



O 开发视觉隐喻并思考布局。 O 建立分镜表（纸上作业 ） 6 
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站” 


你的 Web 设计 工異箱 

你已经收获了第3章，现在你的工具箱里 
多了卡片分类、 IA 图、信息组织等工具。 


接下来呢？我们将深入讨论“你的受众设计网 


以及如何构成优美的网站。 


复习要点 


■ 网站的 里点在 于传播信息——如果信息的组 ■ 
织方式不佳.你的用户将转身离去，而且不 
再回头。 

■ 网站的信息组织对网站导航与可用性具有直 ■ 
接影响^ 


_卡片分类是个便宜又简单、可为网站内容套 
上信息架构的技巧. 


■ 


■ 别依赖你自己对网站信息的分类结果——你 
不是为了自已设计网站，而是为了网站的受 
众而设计。 


卡片分类通常会产生孤儿卡片——它是部分 
网站内容需要重新思考或整个丢弃的清楚征 
兆。 


信息架构 Unformation Architecture ，1 A ) 图 
展示网站信息分区与子分区间的层次关系。 


信息架构图 （1 A 



) 并非设计于呈现网页间 


的链接。 
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4 布爲鸟设 计 





从我孖绐嘈从 Sue 的建议 ， iSS 
把2/多的注 t 力玆在 M 房上后 t 结 
采 ft 是太让人不敢相信？ f 我获锊 
J ttiCjC 前多 很多的 兵注，#带来聪 
硪的按鈕盎击〖 ^ 


遵循黄金法则 




如果当个好的倾听者，而且随身携带计算器的话……总会有回报的。我们 

已经多次提到以用户为中心的设计，但现在才是真的考验你的倾听技巧。本章， 
你将收到用户的反馈意见并违立一个符合用户需求的网站。从浏览器到屏冪实际 
使用 面积，都足力了把用户真正需要的东西带给他们 & 不汉如此，你还将学到三 
分法的秘密 a 你会发现简羊地按儿下计 算器、 标尺以及利用一些网格，就可把 - 
个望之生厌的网贞变成优美的本物。 
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认识你的受众 


设计是为受众服务 

网站的设计 ( design ) 与布局 ( layout ) 迠用户齊右与体骀你的网站内綷时的镜又、如果 
你的布 局让人 困惑，你的用户就会有 糟糕的体验。 然而,如果你开发的设计与布局既保 
持了功能性又能脓顾羌感，用户将不仅仅会在你的网站上 m 留，他们述会晖度光临。 

想制作用户戽欢的设汁，第一步就是真正地了解用户。如果不知道用户楚推(以及能够 
触动他们的事物），实在很难产生符合用户需求的设 i 十。 
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-，笔:上阵 


谁是网站的受众 (audience) ?看看下面的两个网站，谞写 
"F 它们的特定 受众。 



www.deliciousdays.com 


■bj 


ri Hr jri'I 


m- i. .■: :一 = 

■ ■ 5* J— 



^存钱着看这些轲玷 * 祈他们的蹙众 《 
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辨认你的受众 





E 


|T 


r 




i Mm m m 


_j pJW 
—V. ■- ■ u a~ m 


•V +nb. 

■i» ■ 


申 '■»•■ Mr- m< 
■- '■"■—■■!«- I*i - ■ 

41 ' K-« ■- I 


ii ■ » m — 
■■WIPF 1 




iV* 


>»0 4v^w 

^ My 


"trti 9jC^t' 


%； 


磨 笔上阵 
蘇答 


看看这些网站的可能受众 


毐读莫舍德^把替点鞟硪鈞孩螌 . 41 
现5这个网玷衫 M 苟含雜的热伐： 


mitlma Pays 的受众是一群卷重烹饪、 
不仪仅把烹纴咨成0常任务的人。迖些 

| ■琴 ■■*'■ P 琴霣琴■-..#■，■■■_ ■■_■■■_■■■■■ ■■_* ** ■■* ■■* ■*'#■! #■«.* I - * ■- * ■- * ^ * ■■ * * * 

人或许违稃於“輿食宗 "* 或者说他们 

! ■• th a + B * i » >H a * 1 * ■ » ■»■■ ■••■ ■ 驀 ■¥. S' 4 ■• >P ■■ >r §• * M V 4 4 »VI>VI ■ 甲 ■■ 警 《 V4V 琴 » V « 甲響甲 #■ ■孕 ¥ ■ ■ 

把 t 祐视为-种芑术。 


m 


www.walmart.com 


测桴旋更 5 兩玷 I : 辦有户 品类型的兹链 
招——不只烛豸某_ 闼祥定 戶品。没抟, 
它基为？ 所有大众兩设 fh 


Wat 麟 tf ■ ㈣ # ㈣ 板®若中 f 
笼栏役符，看起來鉍4想奴悅九多 

數 螢众。 


Walmart 的目标受众疋法—崧判断。它 


为取伐相 g 多的人群 


们的两站具布_般性，粮钶能设计 


E=l «QO 


www.delicEousdays.cont 


苟深度的異舍艰遂 t tf Delicious - 
Owf 不只是个祛俘含谇的河站 _ 
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最新任务 : RFM Records 

你生活的 地方有 家唱片行 ——RPM Records , 他们决定苋新整顿1998年创违的可 
怕的旧网站。他们不 f 乂想让网站跟上时代，还想要一咚 K 正满足容户需求的东 
更屯要的足，他们贷助了 *个即将举行的前卫 r ? 乐节，如果 普乐 节开始时还住使用 
旧的网站，他们会出 1 L 的。 


■ The RPW 
S ⑽, 



你将要 m 新设 it RPM Music 网站， U : 它矜起來很榨， 而且嬰 确保 H 前的用户能在 
新网站里轾松地游逛。 

辠《非常紧急 f 新网 
as 齑起采很棒 f 





该如何设计一个看起来很棒又能符合 RPM 现有客户需求的円站呢? 


«oo 


回屈 


VINTAGE VlNAL. 

Delivered. 


Home 


weleame to Ihr RPM Music Store 


R.PM Nfii-kjC the pixnud'. ^4. Vmdl 0alidC miliiC Hirtt, \Yt 

offer « wide vwicty of vinUjtc new record% from all genres 
of mu%ic r Pl*cc v^d order Today and act free 2nd day ^tuppin^F 


Online Sime 


Si>ccja|s 


About 


Juvt Arrived 


Convict RPM 


■雖纖 


Aim rirtr 
Tiib HpftDrKliifrp 


llmlivitfa 




Sl >^0 






tMtMM 


RPM 的老扳鸟 
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角色 


认 儀爸 瞄准 RPM Music 的受众 

为一群特定的受众设汁时，你必须知道他们的咨好以 及他们 使用网站的方式^ 
但我们不太珂能一次而对数百名用户，更別说处理成千上万接至是以百万來计 
算的用户了！ 

这_电就是角色 （ persona ) 登场的地方。角&是代表所冇受众的单一用户- 

个虚构的用户，凡朽你的巨标市场群身上敁显著的特征。这里的特征应该与网 
站体验的彩响和浏览■^惯有)^如受众>1惯使用的浏览器或足他们毎周 h 网的 
时间 P 


鈞免笆敌个名字一 
% % ( 5 - 1 ^ (以及？1 用) 






事的联系有助 3 発化用户的 




A^h 


免笆的珥細忌有助子 5 解 

苫个用卢鸟洵定沔结！幼的 
仿形 e 




年龄： 28 
R 鉻 连狻 ： PSL 


毎阖闳蝦上 B 时问：15小时 
常用浏 览器： Ffrefox 
操作系统： Windows XP 
5幕分辨率: 800 x 600 

职让：学生 

洋细信息： Ahm 觉得 I ) 3在料技方®很布 
悟性。 M 在杜交网绪鸟网绪社 S 中相当活 
跃。 她也轻 常利用 B 络购物。 她主 要使阁 
笔记本电胎（型吾布点恂， 侄现在 R 能负 
拽得起这种价梏），那也是她上网浏踅的 
咱一工典 


o 



角毯最 f 龙的郐分甚估们的饵鉍信总 c 蜋 
子虚似用户— 个哲多 诠寧岛个人转岱。 
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你 挖这种 东®叫钕两站 设计？ 凭空 
跬 a — 令人拍，然后£ 9 想倣/妞有计么 
嗜好 7 认真一旦好不好！ 


o 


你的角色应该根据真实资料而拟定 

用 ]_• 建立角色的所有资料究竞从何而来?这个嘛……资料来自许 
多地方。技术资料（例如操作系统与浏览器）可能來_服务器的 
统计报裘。若是用户的在线行沟信息，则可能直接来自用户本 
身一一利用问卷或焦点小组等研究 X 具而得到。茁点 是： 迚立角 
色吋. 并#凭空捏造人物的个性^ 

i . ta 们看一些关 FRPM 用户的资料，可利用这些资料为新的 
RPM 网站让立猜准的代忐人物。 RPM 老板提供了一些旧调查资 
料，供你工作时参考： 


RPM Music 用户的信息 



年龄 

18 ™ 24 
25 一 34 


32% 

30% 


i 角色的莩姑 n 



65% 


35% 


75% 


Male 
Female 

缲作系统 

Windows XP 

Windows Vista 10% 
Mac OS X 13% 
Other 2% 


浏览器 

Internet Explorer 

Firebox 22% , ^ . 

i ⑽兵吁技术和 RCW1 用尸的 

|0ther 3% 们釗迮一个吏周|_)，€铕沿 

的免逄。 


音乐舂好 

Blues 5% 
Classical 1% 

Country 15% 
Electronic 3% 
Hip 晦屬 p 25% 

Jazz 4% 

Pop 30% 

Eock 20% 




孱幕分辨车 

800x600 

1024x768 42% 

Higher 10% 

丨 Don r t know 5% 


省泳喜好芍以告诉我们受众喜 
欢听付么，再仿姑我们决金碎 
玷的主通，外视島惑觉 _© $ 
运个阔玷鸟音洚和另联。 


43% 



网绦缕捿 

Dialup 12 % 

DSL 

Cable 27% 

圖 or higher 6% 



55% 


这墊统 較孩乘匀 f 0 的客户 
调查资科 以及 RPM 轲 站凰务 
器的 0 志记录 a 
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主要与次要角色 



习灌 


根据 RPM Music 的用户数据，为 RPM Music Store 的重新设计创造两个不同的 
角色。第~个角色，使用每项数据下最多的值。第二个角色，使用第二多的值。 


mme mrnm 


钇得加 AS 片。 姊 1 ： 采用 
Cteathe Commons (知 i 5 ? 共拿 ) 

撞权，刁以 f _) 处张姊 的® 片或 
4你 觉浔符 合免疤的仔何房 ® : 


L 


J 


鹐遵一达虛构的个人读細资科 


雄名: 

年聆: 

网路线捿： 
音乐 舂好： 
常用浏览器; 
操作 系统： 
屑幕分辨车: 

职让； . 

祥细信患 ； 


. « ■ * ■ 


« * a * b 


._ ■■ 爭■■艷 >■ V ■ P >■ 


I « ■ * ■ 


■ 甲 ■ . i ■ ■ 


■ * ■ V # V <■ 醇 1 


F 甲 1 WWW C 1 9 l ! 



d-hi-fcriABriiriiii 


炷名： . 

年龄； 

两路镂 
音乐 舂好：^ 
常 ffi 浏览器/ 
操作系紘：_ 
届幕分 桥车: 
职让： 

緙细偖悤： . 


fr*B*B*« inri 


A ii ■ * k 


i ■ ■ * I 


■•« ■囑 


■• V I- T -1 


■fea-AlihBAfi 


d * i 矗 ■ ▲ B 


4 V ■ 甲 4 ■ _ 亭 ■ 琴 ■ 


■ A 麵 * ii 


•I 醪邐 T ■ 


r v ■ v « 


■ T ■ V I 


I- V 'I « -I v >■ 


■ ♦ ■ a> i 
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建立两种角色扩大网站建立时的目标受众。 

建立角色时，你是迚立受众主要特征的代表人物。但大多数时 
候，受众不 (又仅 由一种类型的用户组成。你将发现许多用户不 
会与第一（主 要） 角色相符。因此需要第二（次要）角色。 

筘二角色表现了各项特征中排 行第二 的项。因此，先为主要角 
色设计网站，然后再尝试同时满足次要角色的需求。结果呢？ 
一个满足较多受众需求的网站也让较多受众感到满意， 


谪种 * 色專 示我们玎认考虑更多盎众的共罔 
特征，袅喝？所沭我们会 it 用户更加谋奄。 



1^. 我一定要建立两个角色吗? 


^ : 虽非必要，但这样做比抆好，受众中有着各式各样的人物，你不会一直只为某个特定类型的人 
群做设计工作 # 次要角色表示较少数的受众……有时可能只是少一或两个百分点而已， 

I ®).我可以创造出两个以上的角色吗？ 

当然可以。如果（受众调查中显示的）受众分化情况很严重，能有角色代表受众的其他特征 
或许是个不蜡的主意。但请注意，你所需要的角色不可以超过三个。太多角色只会增加困扰.并转移 
你对手头项目的关注。 
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rpm music 的代表角色 



3 埋蘚芩 


根据 RPM Music 的用户数据，以下是两个角色（主要与次要角色），可用于 RPM 
Music 网站的设计与实现， 


卜 - ^们占3和*大的比剜 》 


r 




3 °^差 戏们巧 RPM 网玷蠻淺 

^ ^角笆，代表网站的輿型用 

户。 我们在 i 泛芍和矸发两站的整个过沒 
中含把砑充重 心放在 估的 AI .。 ，G ^ 


軎好音乐：成+抒,音.氛, . 

常用浏 览器： IttterHLet.Expljorgr 

操作 系统： WfttdQws.XF . 

屑幕分辨孪： g.D.Qx 6 Q 0 .. 

职让： 建 . 筑.频 . 

.康細.信，患丄 . Jqii , 狼仗 A ... 工.作 A , 余务.天太槪只.有.二企 
.小对.在铁。..傲用..象.里.的.电嚴拗.後兹.羧氣闻私.及. 4. 令, 
.与.處筑.相.兵..的.博，妄 . ft ... 有.对候.总.法.出. Jtl 蒸热 . 时 .,... 傲.会, 
到 Amazon 购笋书箱鸟音承。 


I 4 d « ■巉疆 


® 妁 h 以⑽的 i ： 班族.減 
多有空 i 昀的+佔金去 〜仰其⑽， 这表亦他热* 仔玦 

馋。物的 滚锃 —^苒袅购买鸟杳乐和 M 的在®。 

^ 料 ㈣ 料_ 不 /、- 

写 ㈣ 兹寧 ㈣ 全符合 
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Susm 符合 RPM Music 用户中的 
第二大蔽 © 4 夯於士伐代表 ■ 
的占角有网站泛问人盘的 f / 3 。 


使用公窠的仏…电筠线 f 网、根鵠屎 

务器 0 志，这是 RPM Music 闷站用卢第二常用 
的遵韻方式^ • 






V 9 B T 戀 T E 1 甲 



j 2 ^ 768 ! 料存浪 
的笔记本电垢4畢分辑 

巧 I 料以 ㈣ 薄 


姓名 ： Susa II 
年齡： 二二二二 

R 路 连 ‘： Cable . 

音乐審好: Rap/Hip fiop 

常闲别览器; ■ _ f ): rif :“:::.:: 

操作 系统 ： Mac OS X 

■°« l -> ll -« l -' ll '' ll >- ll -- IVI » IHa-lVIV 

居幕分 辨率： 1024 x 76 S 

囑 9 •醪 ■■« 昜甲 4 零钃，《嘤《»辱，《»峄眷||<灞 4 <> 11 ■嚅 •《 9 > i ■丨零 •》*«¥•■» 嚅 ■>#.« 丨 嚓 丨 

职让 : 学生 

■ Fh m m n 琴 .■甲 ■*■_’■* 琴 _,■■■ ■ _■ _■_ ■ ■ ■■■■_*■ ■’ ■__■■■ ■■_■■■ ■■_ 琴 ■.__ 甲琴 琴琴琴琴琴琴, 學學,甲甲 __ V , 琴響_零零 ■ 甲 ■! ■甲孕 

.綠细.佐息二也 似 n . l 者 M 究.生 LM 花褒丄茶少.课余.时 
.齒在网踣上。，.她非.，常.摄 逷料 .技，，.庙 H 汝上 MH 3 
.的, mpj . 播故荔 .购兵 ..奋.乐.。...錄使 m 杏电 胎,.. .试 .便 
.在谭 . f . i . 傲.笔筘.略及.夜兌窟 .敫傲 .破簌.。.... .. 


■ « ■ 4 ■ ■ ■■ b a- ■ 


S ⑽ rn &戧 fH ；6 RPMMak 网站钹逢的'士茗”免資 

t 以 || i 蛋 ㈣ 細“ 
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聚焦子角色 


ifcH 色引导你 


现在有了两个角色，我们该设想： " Joii 会怎样做？ ' 
Susan 会如何反应？”不是为成千上万个面孔榄糊的用户进行 
设 i+ ,你 现在. 是为角色而设计……而旦只专注干他们 3 


让我们再看一0艮 RPM Music 的旧网站,这次从 Jon 与 Susan 的 


角度出发。他们对旧 M 站有什么看法? 


裁们的 RPM ( Vksic 的 



Store 






地茎祕个祕。网站秘 ㈣ 


RPMMu 心网嫌太 阳了 • 冉未左 
^时下电子商务网玷值用的多蛊 
彷旭 。 Su ⑽沒 有吋间学习 f 達用- 
个 a 吋的系统。 


重点 

含怎么 ®T 


VlNTAOK VtMAL. 
Delivered . 


每个 M 方港起来郗 ffi 奇後 
达个两站是怎么？？ 


flome 


. -蕊 i. 一：。 

Welcome to tht RPM Music Stoj 


■’ RPM Mutic h iHc prcmief N #4, >*uui^t vu： 

S ofTcf it wide variety of \iarA|c Jtud onv ™ 
of muiic. PUcc and order roda/ and ftl free 


mt RPM 


RPM 


Just Arrived 


我比较 3 愤值用 

Awazon.eow, 

KPMjfc 难用？ 
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Tt 


多 




* 起采枝忮的 


我接 






子 










3 m 


r 坫太大 


RPM Music 時蛄购兵较犬的 S 示 器喝? 


用 



较小的显示设备限制了屏幕的实际使用面积。 

Ion 使用的屏幕分辨率是800 x 600,不算很大……当 
然，如果 Jon 使用这样的屏蓊分辨率》则-大多 
数 RPM Music 用户的情况也 一样。 

使用较低分辨串，如 800 x 600 时， RPM Music 网站有 
—部分无法显示，： km 必须卷动网页才能看完所冇内容。 
不太好用……而且势必造成问题。 

听起来感觉 RPM Music 的旧网站在设计时并未考虑屏 
苺的实际使用尺寸……这是我们可以着手修正的第一 
件事。 



纽纽脑 


究免应该设计一个在特定分胂芈下（受众最常使用的分辨率）看起来 
很完美的网站，还是把网站设计成在多种分辨率下看起来都不错但没 
有最适合它的完美分辨率？ 
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比较屏苺分辨率 


分辨率影 响设计 与布爲 

祥帒分 辨率影响网站可用的墀孫实际使用而积。较高分辨率表示可取用较多空间…… m 通 
常 Ullhm 户觉得所冇东西#起来都冇点小。我们用几种不同的分辨串 来希看 RPM Music 的 
旧网站= 
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屏幕实际使用面积 


眉幕实际使 ® 谛积决定 R 站在用户的 
浏览器中搵示多少 

谓把屏嵇实际使川而积 （screen rea] estate) 想成画布，你要在这块画布上逮立一个网 
站。但有个问题:画布的尺寸并未固定 u 有些用户拥有30寸的大屏幕，冇些人却只用 
娇小的 iPhmu^ 更糟的事还在后而，很多用户其实会通过很多种据嵇访问你的 网站: 
外勤时使用手机，在办公室时使用21寸的辟幕，在家则使用 AirBook 的14寸墀嵇。 

眉幕 分辨率也 会影啗孱幕奕际使用齑轵 

还荷分辨串的问题，叩使是21寸的辟幕，用户也■以自行挑选分辨串 i 从 640x480 到 
1600x1200, 中间还冇许多（通常不常 用的〉 选项 ff: 君挑选。分辨率较岛，表示固而 
上的东西卷起來比较小——而我们将有较多可供网站显示的空分辨率较低，丧示 
网站使用的素材舒起來比较大，可以利用的可视空间也较少。 



我不太？辟你讲的这些术语。我 R 知 
级 RPMMusk 的两蛄 庹是俄烂 4 我 R 蚤想 t 
來抽选 /L 萍喵侣想在钱达么戗……滾办 
泫 r 



你的用户并不关心屏幕实际使用面积……他们 
只要网站“可以用”。 

你可啓见过网站上公开写猗“浏览扱挫分辨率 1024 x 468" ? 
你晋经 K 的依据这些信总动手调整屏幕分辨率吗？ 

嗯，好像不太会动手做吧。 

贵任都交给你 f , N 站设计师，你要确定受众呑到一个没有 
问题的网站。你不能侬赖用户在参观你的网站时调整分辨 
率或显示设备……如果你(和 客户） 还想待在这个行业的 
活。所以我们必须想出一种让 Jon 更容易使用 RPM Music 的 
方式一■他的屏莴分辨串造800 x 600,也要考虑 Susan , 她的 
墀嵇分辨串是1024 x 768。 
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上陴 


以下是几种处理不同屏幕分辨率的方式。请研究每一种方式 
并写下各种方式的优缺点。 


方式 

/|■:网中使用 JavaScript 自动检测用户目前 
的屏幕分辨串,弁将他们#向敁适合泫分 
辨率的 RPM Music 网站的版本 a 




■ + ■ + ■ + ■«■ 4 ■ 


餘 A 




使用 JavaScript 栽人分別适合各种分辨率的 
CSS 样式表。 






只设 L 十一个 RPM Music 网站，它可在备种 
设格与屏痛分辨 率上以 好运作。 


优点 


铋点 
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处理不同屏幕分辨率 



磨笔上阵 
薄答 


你的目标是写下各种处理不同屏幕分辨率方式的优缺点。你 
想到了什么？ 


方式 



绝的基三种方式 I 最难的—珅。说異的.碓 
怨的同一个轲玷役0 ■"佾不同版本 ？ 


在网页中使用 JavaScript &动检测用户目前 优点： 玎处理的遵幕分辨率菹谲棍 


的屏慕分辨率，并将他们导向最适合该分 
辨率的 RPM Music 网站版本。 



■铁点 …叙果 .. JavaSeri 时■被兵.闲，…则… 
杜方式洱用武 


重潘 f 4 务龙该枝 JflvaSetipt • 例如磁认网页基5 iE 
磘？承，食4不4个妗主意。釦菜脚本编砝笮同 
通成老細。 Setipt 破兵_ , 这 3 F 神方式部邊■用。 



使用 JavaScript 载入分别适合各种分辨串 
的 CSS 样式襄。 


优点： 一个 R 站配备许多不罔胲本的 


椁式 袅比许多眩本 的网站 好多？ 


o 


H ... 周接热., ... 没有： tavaS.cript .. 欲 
猱有.检.谢，展赛.钤，檐.丰..的 . 


V 比起泠务#设备、各#分辨车转別射作专康网玷.迗场 
衆略衧多：？。秕彩必须釗建许多玢 css 亡#„住 . qf 釗 
遠一汾 XHTML 史 件 - 也 HU f 龙锩妒与更新的 


只设计一个 RPM Music 网站，但它可在各 
种设备与屏嵇分辨率上运作良好。^ 



优点：不翥要 JavaScript 或額外代 

■ ■■ BVBBAkHh* fl ■i*HAI*l*l°'fel- 4 l-!feH-fel-KI--Hi--ai--lri'-l»ahli>l-ll-#l«l «■•!■■■■•■■■■ ■«■«■«■ 

码。 

h »4 fe 4» •■»■»•■»• _»_0•■琴警 ■ 9 ■琴辱嚶 

. 铁点 ;_ 你 . 袋 . 级决定 iS.it 系 1 的 . 二 . 番 . 
銶”分辨率 p 


它容易的稱决方凍 & 不 龙设 斜的代砝较少，布 A 不* 体沭 
HvAScupt 来 4 lfS 分辫丰。你只莱銮鰣识出用户和设升时部敍越金的& 
俄分搿羊。辦有絞其分軺卑的设备食正磘地鹐排 网站， g 吁校 ■) •的4華 
則将户 t 涞动条（希望这种俅况 P , 岌法在极少數用户势 上）。 
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: 我已经了解屏幕实际使 
用面积是什么了,但我对屏幕 
分辨率还是有点疑问。该如何 
测萤屏 幕的分辨率？ 

屏取分辨率是由測货的水 
乎与■垂直的像素数量得知 a 所以, 
较小的设备可能采取 640 x 480 的屏 
幕分辩率，这表示屏幕的显示区 
域的宽为640个垠素 + 商为480个 
涞素，分辨牟为 Hd 0 x 6 D 0 則表示宽 
为800像素,高为 6()0 像素……依 
此矣推也清注意，不只是电确 
的显示蚌敢使用像索计算分辨率， 
电视 《 LCD 、 DLP 等） 也用相同 
方式表示分辨芈 & 例如 720 pHD 
电视的戽幕分辨牟即为1 280 x 720 a 

:当我设计网站时，真的 
要考虑多种屏幕尺寸与屏幕分 
辨率吗？ 


答 :当然！就#是泠统的桌上 
型电脑.你也需要考恵各式各烊 
的分辩丰4电肪 I 幕可能是非常 
小的 600 x 800, 也可能是非常大 
的 2560 x 1600。 这还没把移动设 
备 （ iPhone ， 手机、 PSP 等） 以 
及那些用户可以上网的设备（如 
游戍机等）算进去！总而言之. 
一 b 都回归到你的调查结果以及 
对受众的了解一一创造一个角色， 
能够代表重要用户特征。如果你 
知道主要 ( ft 色通常使用较低分辦 
率渕1问站，则$需太过担心为 
较尚屏幕分辨率与较大庄示面相 
做设计的问题 4 

: 好吧，我深刻地体会到 
必须考虑许多不同的分辨率与 
显示面积，但是，有没有一钟 
最广泛使用的分辨率呢？ 

答 :这个问题取决于你的受 
众。如果你做过调查研究，而且 


了解你的受众.即可决定设讨时 
依据的 0 标分辨率。然而 + 若是 
完全不了解你的受众 （或 受众非 
常广 泛 }. 大多 ft 网站的统计资 
料显示，约有 48% 坍户的砵幕 
分辨率泠 1024x76R , 需要更多好 
用的統 计汉 据，清到 hitp ； //www, 
w3schtKiJs.com/brovvscrs, 

R :我该如何知道自己的网 
站在特定屏幕分辨率下是否正 
常呢？ 

^ :測试、測试再測试，建立 
网站 + 然后改变你的显示设备的 
林幕分辨率表检測设计成果，如 

果设计对象需要针对特定分卅率. 
请从基础设计阶段就采用指文的 
分辨率。苦设计对象是其他种类 
的设备（洌如移动设 备）， 手边 
务必放置这些设备.以便測试网 
站。 


目前位罝 ► 


127 








xhtml 与 css 基础 


为 1024 x 768 建 5 基础 XHTML 鸟 CSS 伉化 


杉越 XHTML Strict OOCTYPE 




CDOCTYPE html PUBLIC rr -//W3C//DTD XHTML 1.0 Strict//EW" 

11 http://www. w3.org/TR/xht ml l/DTD/xhtn)ll-strict*dtd 1f > 
<html xmlns-' , http://www,w3,org/1999/xhtml N xml ； laag= ir en M lang 
<head> 



en，_> 



index.html 


<title>RPM Music</title> 

cruet a http-equiv= 11 Content-Type 1 ' content^" text/html; charset:=utf-8 rf /> 

<1 ink rel= ,f stylesheet' 1 台 sheets/rprtucss M type- 11 text/css 11 

medla= ,, screen f, /> 

</ head > <div i 仁％叫”> 将用* HI 整网玷版® 

< bod y > / g Xi 贤 g 的中乒。 

<div id- M wrap ,f > 

<p> Lorem ipsum dolor sit amet f consectetuer adipiscing elit- Nullam 
est nulla, posuere luctus non^ ornare in^ augue, Sed ultrices 


turpis at mi. Vivamus nisi neque, vehicula vel A imperdiet a, fermentum 


vitae, purus. Donee at enlm. Nunc sollicitudin sodales sem- Lorem 


ipsum dolor sit a met, consectetuer adipiscing elit. Proin ligula inagna, 
feugiat ac, cursus eget, aliquet at, nibh- In pulvinar massa in sapien- 
Proin egestas* Suspendisse fermentum. Vivamus commodo aliquet libero.</p> 


</div> 

</body> 

</ html > 



崎我们 _ 



/* rpm,css V 
body { 

margin: 0; 
padding: 0; 
background: #fbf9ef; 
font-family: Helvetica f 
liQe**height: 1,4em; 



这是典切的 < ibody ^> 杉签设金 & 这鸟 
达界 g 鈞穿 • 没龛 坊著色島字螌以苁网 


sans-serif ； 


} 

p i 

) 

#wrap 



margin: 0; 
padding: 0; 



" iO auto 将使 fK St 字鍵 
排存到箔器中與。这个值也将 
让你的抑站可以紀合不同屑蓽 
分擗丰进行谰整。 


margin: 0 auto; 


width: 


900 px ; 



贫度 900p x ■)_ 封可破窖妫在 f 024^768 分揭车的 4 单 
沟 ■ fS 又 A 得弓 旋入 RPM Music 两站的 必乘为 容 ^ 
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创建一个非常简单的测试网页。 

我们的 RPM Music 网站还没存什么实阮内容，但先创逮 index . html 与 
stylesheets / rpm . css , 然后在你的浏览器里载人这两个文件。 




\ o 


a hu pf ■_ ■_■ -y— « t •«r^ 
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LiiDit ic mr. 'HTiwrus ^ naqu*, vtfwjia tTipMJitt m, lanwitun iribt, puajl ocnc at •ntm NuncKriicftjaiitodMi 

wu >n «g««tu 




—d 嗜……■&剑的洛色稂放到 

噼里去？？ Jow 使用的分拼率蘭 
硝是 800 x 600, 我们为什么要枏揭 

1024 x 768 來伏化 RPM Musfc ? 




AA^WW* 




tl Pwi M »4 n 


p«*un 4J^ lAri ao\ ornin n, Kigii* j 
私 A* D#«C « I 

lO^ l * 4 « «(m K 




& >ip*rdl 


o 



对于受众的了解让你在 知晓信息情况下 作出决策。 

Jon 使用的分辨率是800 x 600，但如嫩炷前翻到 
第115页，并确认 RPM 的用户调奄结果，你将发 
现 800 x 600 的比例只是略萵干 1024 x 768, 知道这点后 T 
我们可以建立一个在 1024 x 768 上看起來最理想……但 
在 800 x 600 分辨率下也可运作良好的网站。这就是角色 
的 力量： 你可以作出决策，并了解决策如何影响受众， 


目前位置 ► 


129 

























rpm music 的功能 




RPM Music 2.0 

□ 满足现布的所布 窖户。 

□ 更新 R 站外艰乌感觉。 

□ 搵供馎窖，佴仅为次要该点 

□ 主荧 上布唱 H 的特剖 t 传。 



我们做到了哪些 RPM Music 网站需要的功能？任何一项？完全没有？勾选出你认为已 
经处理好（或正在开发）的功能方块。然后，写下你对处理 RPM Music 2.0 其余功能 
的想法 0 


獼 








1 - 
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太糟 3, 我们筏？达幺多时间建夂锩色，还 
在屑蘑上镝入偎文字。规在 CEO 却党 锊我们 
什么邪进傲 。 我们的进废落后？…… 



布局与设计 


Frank ； 我小这么想 a 其:女，我觉得对他的第一个要 
求：“满足观舨的所有客户”，还 P : 处理得不错 & 

Joe ： _为我们让文卞在 1024 x 768 与 800 x 600 的分辨率上 
卷起來都不错的缘故吗? 

Frank ： 那也是部分原因。但我们的 角色- …- 

Jim ： Ion ||J Susan ? 別吖提虚构的人物啦！ 

Frank ； 我是认興的。我真的觉得，如果能让角色满意. 
我 ( H 将能满足 RPM Music 的核心受众。 

JOC ; 该怎么取悦一个虚构人物？我足说，你怎么知道自 
己的设 汁在为 他们服务呢? 

Jim : 或许可以崙一份虚拟的窓见调査丧到他们的虚拟伴: 

址，如泯他们虚拟地崙回调査表，就赠送一份虚拟的小礼 

*1 . 



funk 


Frank： 够了、够了……是的，我们没荇办法砟 的佝问 Jon 
成 Susan 的想法 4 ftt 我们知逬他们还年轻，而 K 他们使用 

新潮的电脑…… 

Joe： 你的意思是说，如果我们的设计很时尚,他们就会喜欢? 

Frank： 正足如此。 

Jim： 好吧，暂时当作我接受负色这种做法。什么足时尚？我们该怎么让一个网站符起來既 下雖 又时 
尚还能满足众多理想？这样的设计只是迠于美学吗？奸像设计师已经胸有成竹 r? 

Frank- 不完全是 & 事实上，我刚谈到某个非常酷的 东西： 黄金比例 (Golden Ratio) , 


Joe： 就 f 象“黄金法则” (Golden Rule} 吗？已所不欲 (Do unto others) … 
Frank； 不足，黄金比例一是种确保网站赏心悦尚的好方法，让我做给你看 
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基于网格的网页布局 


人们軎欢并并有亲鸟 m 织良好 


什么因素使得漂從的网站吸引我们？又是什么因尜使得 J ]. 陋的网站看起來没有吸引 
力？多数时候，…切都关系到我们的双眼如何感觉网站的元素。最糟的事莫过于杂 
乱地放 w . 了图片与文字的书而文件或网页^吸收 o 息时，我们的双眼需耍可预测性 
( predictabiUty ) 与某种程度的视觉逻輯 ( visuallogic ) 0 


想象在你最苒欢的网站上铺上一张网格图 ( grid ) ,网页上的东西足否依网格排 
列？网页上较明显的水平与垂直空间逛否可把网页分成儿个分叵？我们沿一下基于 
网格的网站以及旧版的 RPM Music ； 



耷0子 


* • •. _ jo ^5矣* 


网格 


Subtraction , cotYi 页说0采用签 
子网格的汸式。讀注意认马舦这 
幵祐穿趑莉兵苒余部分的玆 衫线。 
严格的 行惠鸟元景间拒部定现5 。 


: PM 同站不太秸祛入网格 



乇论在 RWWk 如: J ： 

荩么据放冏格，铽^ 
4沒奄 iiii 





；- M . 


.-■_•/ . 


讕 










n >i 
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布局与设计 


R 掊应该多 t ? 请®黄金比例 

M 格是敁 士老的 图形设计工具之一。它比“当代” [贺形 设计更有历史^早在文艺 S ： 兴时期， 
画家在构阌时就开始使用以黄金比例为基础的网格。黄金比例 （Golden Ratio ) ?它到底垃 
什么东四？嗯，如果你敢一条线段的长度乘以 0.62, 所得到的比例即可用于创迪赏心悦自、 
G 然动人的网格图^—这就是黄金比例！ 

赀金比例背后的概念，乃 是利用 我们在周进生活中无刻不见的平衡，并把平衡葚用往网站 
上。结果呢？就迠让网站“觉得”并"聆起来”很对。沾沿一些货金比例的实际范例： 



2 * 芬每的《圣后的碗餐» 4 
艺术作英中4用黄舍比例的知 
名笵倒。 


25内容分 S 是 
比倒中较大的 
部分，占踢网 
页 2/3 的空问。 


否 ㈣ 员枣乎= 


埏雜钱差黄含比則出现在 
大 t 然中的范例 fl 





制桟4比例 中粒^ _的 ㈣ 。 


_j» •▲圓 


a 






史 i 




mm, 




1***1 ► 


SXS\1 

t _ _ 14H m 


嘀 1 南 __， _ gpt«tnf **l 

U'q.Vf — fA| 

fc i^f ■ " ■ !! ■• • *!■ j 夢 ， IMF 

!■■ M Mk Pf 1 ^ HrflilF 

■49V pwvha *-wiW' m3 •m^m r W^wk 


s™ 

，■ li_ k • 

■■*—- UriJ ^ — 


Fnxn ih* 


iK£3 


Prfvicrtii Fjitri« d 1 

m-Vcr^M 1 Ji 


JV LJw Gn|> bM^ib 


i3t3Twi I| Mi ftUf lijiF U 


Start Cpnference 


<**"• * f ■■ W ■| ， 

« fcflPs^ ^PPi^ 

^riPLA K^rti ■■a Ohifia i<i. Tm^Wrn ¥W*^ i^d 1 


•■tp 4 'WW ***■ — t* 4 * ^ 學 _•■_：.. 

? 胃 M !■* _ * Wst uf ! Wp , hM*!L 

■Nv- r ， ■ f ja vt ■£ prt b ■ 




¥ «-« #1 _ Iv! ■ 


L1»ubJLc£ the rLjtiil EdOj 

fT, rf + P^t _!!,■ ,■，■ _ 
mm m I ■ ， _ 「囔 ， ■ a- 

UHttmf -m l^wiff ‘ k 

v pirth 1 i mj« 1-««1 _ 

1 私翊 ■ ■ ■ i »■ *» f -!■ — ， 


■%!!•._ *#* »»*ip IF4H- TV 
KbM* M •匾 ^i| n-««.4V m W 

■Mhd. |gii|BTi *rkl i hjj_， _ 
g* —■* -**■ ■" > ■■■■ 1 M • ! ■■ Ji * 

W .B * ii_| ]^ P , ^li' ■ B •* 
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■ Ji 






I •■■ _ . * „ rm^w^md P 

On-F* kM«M&|F*i 嗪 
wfrl k _ ■ ， iSfc i* ^»ifc 
p-^ wm^i, »«■# #b mr^. ■ 

mi "^p *_—，■ *P^- ■■ I 


fppquecii^ Site* 


Cn^-v |!WNI 


■嗜 


• >M 


fhp 4 rt| |^|v« M i 


Abmt 


Srjnh th t « ii!f 


■ *i^*^*« N f« ■- ■ 

.%am m b^P ， r ^4 Im 11, 

S^#—^1 f 1 *^* 


- T'-^I W -Pi# 
mw 

s *■■»=■*# i^i 
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r p 

:每 梅 


m ¥« ， ** 『 K— 


u 卜一 






3dr^ Ajpeeft!: Afibrk 
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三分法 


三分 法： 黄金比例的简易皈 

黄金比例表示 t 如果钯某个物体的总长度乘以0.62,即为适合放入内容的区域长度。余下 
的 0.38 则适合放侧栏、附加内容、可以梢后再看的事物。 

但是,除非你随身带着计算器(谁快来做一本 《Head First Algebra》 吧），否则乘以 0.62 实 
芘不方便。幸好， 0.62 非常接近2/3…… 0.38 则非常接近1/3 & 所以，如果你把某个长度分成 
三份，其屮的两份很适合放主要内容，刺余的一份则适合放侧栏、导肮、博客…… 

以下逛你应该做的市： 

步骤1:牮出一张纸、画一个矩形代表你的网站。然后把矩形垂宜分成三份（可以用尺或仔 
细目测）。 

步骤2:把矩形水平分成三份。现在 已经存 一张 m 略的网格图了。 

步骤 3:丙把毎个垂直拦分成三份。现在这份囹有点像是在网格中有网格，因此在网站上的 
较小区块也可利用2/3对1/3的比例。 

步骤 4:编排你的问站，排列各种网页元索时记得对齐网格。 



这基我们4第页孝 
釗的斜 RPM Music ^ , 



加 I：M 有垂 S 闯络后•饬 
〆 軚苟5芍以用子鹆排资® 
无#的 a 麟网格 


可在较犬的分 Sf 重笔 
2 〆 3 对 f / 3 的分 #j 比例 
分 41) 攻发视你的 f 龙兩宏 e 
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布局与设计 

RPM Music 鸟黄金比例：（沄® ) 寮例紐究 

如果人眼真的苒欢看到2/3到1/3的比例 ， RPM Music 达到标准的 
程度如何？我们已经知遒它未依循前页的网格排列。但如果我们 
手动画上2/3对1/3的比例……可以从 RPM Music 上看出什么？ 



RPWi Mmic 的 访采 占用太多土问’存 
孔5内容岛访景的整体比例。 


RPM Wk ; 的分楛方式老得; flJJ 太这••… 
(2让网再; t 泰值用黄金比例网格的齐后 
会有很大的老异。 v 


较犬的 S 咲 

的 2/3。内 
窖就茂旋存 

CsS , 


專躭 S 鸟黄舍 
比例相老; T ■这, 
进整宽度左找很 
容 I 




• -•，及 




VINTAGE 


VINAL. 


DELIVERED 


7^ 


一 .. , 

Wdnm e»i 1 k RPM Mmk Storv 




I lomc 


HTO Mw lidk pratoo. *4. ^vmpt imhot^mtc Wwt- 
c&tbhh^ iwitTjriftfvinii|r ird runt *wuJ rf^a^^an *0 
cfvmM- y>Sry Mod f#f £nc .^d Jqr 


OjJ iiLC fiCOfc 




Spccmts 


/j- 


騎翻 」 


Abonr RPM 


I - 

Coimcx RFM 

\.;糧 

«|• — ■ — —- - ■ ■ 


Jih* Anivto 
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在网格上画草图 



以下面的网格为基础，为 RPM Music 网站规划分镜表 & 请试着保持网页元素的编 
排方式，不仅网格对齐旦元棄相互 关联。 是否有某个元素应为主要内容？谞把它放 
在2/3对1/3比例中的2/3区。尽最大的的努力-如果你尽力维持这样的比例，这一 
题没有标准答案。 


下®的叼格差体筠两莰充度方 
950 px H (茬一桂均 

^ 30pt 空仓 IB 則巧 fOpx) 0 




8括晷这个版®的 f / 3 。 
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我认为，眛3 辻两 贞上的东®來用疋碥的 fc «； 倒， 
我 们还鬵 a 付出 a 多 努力。 我们必翔闲重*的事 
拍嘹51注意力……箝认 it 它们大一点，对嘈？ 


O 


重要内容应该“更重 w 3 

你应该已经把敁 m 要的内容放在占有网页2/3宽度的区 
域。不过，这样就是吸引大家注意它的唯一方式吗？当 
然不只是这样！ 


布局在干承取较大元素与较小元素的平衡。较大的元素 
占有较大权重，较小元素的权 m 较轻 u 对了，下面是元 
索间如何相互 关联： 



布局与设计 



©妁在栏较 f • 
这个掊刺有点比 



编徘你的网 M 时，需要考虑两种 平衡： 对称与非对称。 

对称平衡 （symmetrical balance) 出现在两侧（水平或垂 
直） 的元素重贵相同时。 

非对称平衡 (asymmetrical balance) 出现在网站元素的 IK 

蛩并非依屮线均分时。你会得到一个非常大的只有部分内 
容出现的圮尜，并由其他较小的元索衬托^ 


重新审视你的第136页上习题的解决方法。你的布局是对称平衡还是非对称平 
衡？你觉得布局平衡（或不平衡> 是种进步吗？根据你的喜好修改布局，然后翻 
页看看我们提供的答案^ 
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利用网格组织网页元素 



主枝 g 将有4埒刼®的©片 以芨 
相在的描述。 


制楛 s 笮一 a $趿落和楛跬 t 构威 
闷丙右迖 f / 3 @域的内窖。 



在本习题中，你必须根据浏览器网格图为 RPM Music 网站画出分镜表^习题没有 
正确答案，各位只要做出一个平衡且遵守黄金比例的布局即可。 


9 ® 蘚苓 



再共 这域埒 椹跨网否的领揉. 
i^a 兹在在 上角。 


芩鉍 S 域将占鸩氏 
^ < rfiu > 2/3的空问，斿设 

V 十威分页杉签的风仿\ 









容爯金來«说 
内们隹用铒字 
藶蔌用 •专 .£ 

*£ h^r 


• PL- 
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布局与设计 


还 论得儀 色码? 


回头看一下你在第 [38 页的答案。它平衡吗？无论是对称平 
衡或非对称平衡部可以。你遵守黄金比例了吗？ 

fy. 需耍考虑的 ff 项不只娃这些，谪记住，你应该为角色设计、 
他们苻些特别在意的事项。 


-- 



蝕名 ： Jon 
年於： 24 
R 路 注揸 ： WL 
舂好 眘乐：浪行眘乐 

常兩浏 览器 ： Internet Explorer 
綠作 系统 ： Windows XP ^ 

居幕分辨丰 ; sooxeoo 



你的 RPM M « sicf 53 站 4 3 ■耗 


谜者$ SusaH 

年龄：多0 
R 路连接 = Cable 

軎好 眘乐 : Rap/Hlp Hop 
常用浏铱 #: Firefox 
操作系统 ： Mac OS X 
愿幕分辨率： 1024x768 


刑贤誃的问跬2不 t 荽■伐 
/5尜分铒库的砝電龙考忠 。 




沱#你的窖户码? 


RPM Music 的老板有很多要求。你做出的 RPM Music 2.0 能满 
足他的要求吗？ 





RPM Music 2.0 


满 足规布 的窖户 


吏新 R 站外艰鸟感觉。 

揸供馎窖，佴仅为次棄傳点 


RPM (VWic 2.0 

{2 巧貧现备—场 

: J 呜？ 



主克上布嗜 B 的特别宣传。 
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使用 blueprint 框架进行网页布局 


O 



我们准备好深入 XHTML ：?, 
4 码？我们玎试使用 WSst 立实 
标的 R 梓，然后相揭 R 将溥列无 
*7^7 




承用的两否 
宽度巧 950 px , 分威 
24 n , 备楛 3 S 30 Pt 
括矩 f 0 px o 它将给 

栽们一个《常氹用 
^ 〖024 H 68 分辫车 

的布忌。 


市面上有现成的 CSS 框架 （CSS framework ) ,可 
供“填入"我们的内容。 

当你实际动手用 XHTML 违、 V :网页时，对齐元素就 
不像使用纸笔与尺子那样容易了。幸好，有许多现 
成的 CSS 框架可以为你提供网格 0 煅好的资源之一 
是 BlueprinE ： http :// ww \ v . blueprintcss . org/ a 


铪入 ” css p 

Wj - - d £ XSS 

ot U 的 h 洚 £ 

我 fi 他资 泜。 


Blueprint 最大的优点在于它对可创建的布局类型提供了 
相当大的灵活性^它还提供加上样式的表单元索与状态 


倍息——很多框架都没有这些内容。 



Biueptint jj ： ^ ^ $ 


mo 




二 . z 


• ■ 'I ■ f* — f ■■ ■' ■ — — ' —■ — ' I 






Blueprint Tests : grid.css 


I'M! 


Lh^i 




^mi 


■ _ p _ m^wmm , ■_«,_ imwiP iwp i ■_■ ,|町 , mtL 糰 __p ft# __ wj _i _ _k，_ _ %w^t§ i 

_b« mmm _Mp ■ »ni»i< ■riim*** oma m «m 

■ H Mf —* i py_ _ mm wtmm ftApingv li vvu>. 

[H^wPfeH >-9« En|3i^M* pg—aa tmm pgUP*, fctfli _ ifPM fl—Mj *PP» 


巧 你的网夷加 1- 

巧咖. ㈣ 看到 
e 免闷格©.赛盏 A 


嘻 


4 i * i 


IS fl >1 


M It 


ti n H 




RUViMW HiMLi 
■ Ms^m _»1 rf_wr 


n 


a _ it *_ up ■ ■ m 


C. DriBKA» hi»l 


*<*«■ ■**>«,* airME?iCLy L*if tMiF* 3 b^»« a— 


® Blueprint 


140 第 4 章 
























□ □□□□□□□□□□ http://www.pin5i.com/ 

布局与设计 

从 Pluepririf 框絮役簠 RPM Music 2.0 

确认你取得 r 第〖28页的简易 index/html ^ jrpm . css 。 然后访问 
blueprintcss .org 并下栽 BluepHnt 。 在解 JtE 缩后的13录下，你可以找 
到 /blueprint 文件夹，里■有我们需要的所有文件。你可以把这个文 
件夹 M 的样式表放到正在迚立的 RPM Music 2.0 网站的样式表文件夹 

中： 



RPM 2,0 M K dc 两站的云 
件夹_请创建印州丈蜉夹。 


这 f 4 圭 ^index.hMi, 
本耷级系。 




/stylesheets 


©巧稍平的琏各 沄左这 
5经有了 眘 pm . CJS ，* ■…我们 
将更斩这个玄用¥新 
拔的 RPM Mtftfie 两站上。 





/images 


rpmxss 



rexss 


ie 加入一 哆現則 来仿助 
BUe^im (鸟 RPM 

站 ) J(l internet Exploit Si 



screen.css 


差辦有來 t 

Bluepunt ify CSS 规則的 
创 滄基子 网格的布居。 



将手边的成果与上图的目录结构相比，如果有任何缺少的地方，请动手加上。 
下载 Blueprint 并把它的 CSS 文件加入你的网站结构里，然后，让你的 index , 
htmf 连向 ie.css 与 screen . css 。 使用来自 Blueprint 的范例作为模型，尤其 
是引用 iexss 的方式。 
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设置 blueprint 框架 



习屬蘚答 


将手边的成果与上图的目录结构相比，如果有任何缺少的地方，请动手加上。下 
载 Bkieprint 并把它的 CSS 文件加入你的网站结构里 e 然后，让你的 index . htm ! 连向 
ie - css 与 screen . css e 以下应该是你想出的结果： 


碡认你把 Btuevtint ffy CSS 

Uikmith CSS 

何 Btwepiinc 6 *) CSS 規 BlK 

<!DOCTYPE html PUBLIC f *-//W 3 C//DTD XHTM^, 1.0 Strict//E 『 

,l http://www,w3*oi:g/TR/xhtmll/DTD/x^htmll ta Sti:ict ,dtd fl > 

<html xrnlns="http ： //www*w3,org/1999/xhtmlv xml:lang= ,, en ,1 lang=’’en_’> 
< head > \ 

<title>RPM Kusic</title> 


<meta http-equiv-^Content-Type* 1 content^"texu/html; charset^unf-S 11 /> 

<link re^^stylesheet" type= ,T text/css 1, media-'screen 11 今 — __ 

href ^ stylesheets / screen . css ’’ /> 

<£—[if IE]> -- 

clink rel=_ 【 stylesheet” href= M stylesheets/ie,css 11 type= , 1 text/css ir 、 
media jc£li screen, proj eotion ,f > 

<![endif]—> 

< r ——[JF iE]> <link rel=’’st:ylesheet__ href- ,, stylesheets/rpm,css M type - 11 text/css 11 
H # P* ^ mediae 11 screen" /> 



sct € Ci \ * 泉主在 

的艾件。 


^ CSS 用來 

w 不同 方式 

^ xplote 7^ 


^internet 


</head> 

<body> 

<div id;"wrap__> 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit - Nullam 
est nulla, posuere ut, luctus non, ornare in, augue* Sed ultrices 


turpis at mi. Vivamus nisi neque, vehicula veij, imperdiet fermentum 
vitae, purus. Donee at enim. Uunc sollicitudin sodales sem, Lorem 
ipsum dolor sit amet, consectetuer adipisclng elit* Proin ligula magna, 
feugiat ac^ cursus eget, aliquet at# nibh. In pulvinar massa in sapien. 
Proin egestas, Suspendisse fermentum, Vivamus commodo aliquet Xibero,</p> 
</div> 

</body> 


index.html 
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~有蠢醜 


究竞是什么? 


问 


YU ) Grid CSS 又有何优缺点呢？ 


瓜句 i 框架 （framework > 

^ I 目前.“枢茱"其实只是网站设计与开发时 
的行话，枢架只是一组工具、函数库、惯例与最诖 
实践，怄架的设计用于萃取每天例行的网站设计任 
务成为可以重复使用的通用模块。优秀怄架的目标 
是让我们能专注于项0特有的任务，而不是把时间 
花在重复的席俗任务上 {例 如用 CSS 编排网格）。 

1^1 :我知道 Blueprint 是个不错的资源，还有 
其他基于网格的 css 框架吗？ 

I ;有——有很多很多怄架可用，其中最知名的 
是960与 Yahoo UI ( YUI ) Grid CSS , 

I^J : 960? 它与 Blueprint 相比孰优孰劣？ 

答 : 960 ( http ://960. fis > 与 Blueprint 很像，在 
可创建的布局类型上同样提供了相当大的灵活 
性。很可惜，它对印別排版风辂的内置支持没 
有 Bhiepriru 那么丰富 w 960有項优点，它的文件包 
不仅包括必要的 CSS 文件，也包括一些方便好用的 
额外功能，例如纸面模板网格（以960柜架为基 
础）可用于绘制设计草 S 4 


: YUI Grid CSS ( http ：// developer , yahoo , 
c om / yui / grids /) 是 Yahoo User Interface Library 
一部分。就像 Blueprint 与960，它对可以创建的布 
局类型提供了相当大的灵活性，很可惜， YUI Grid 
CSS 有点复杂.因此学习曲线有点陡峭。往好的一 
面看, YUI GridCSS 网站上有 YUI Grid Builder 工具， 
一个視觉化、使用菜单操作的编辑工具，可让我们 
根据 YUlGrid CSS 框架快速创建（并自定义）布局 

1^) : 对于该选择哪个框架，我还是有点困惑。 
可以给我更多建议吗？ 

^ :你该选择哪秤枢架完全视你的需求而定，很 
多事都是这样，大原則是选择一个简易性（尤其是 
第_次使用怄架时）与灵活性平衡的框架，这一点 
依据你可以建立的不同布局的数量而定 B Blueprint 
是最受欢迎也最灵活的选项，但是，说真的，邡试 
试着吧！或许你会发现更符合你需求的柜架，请记 
住,框架是用来減轻你的 CSS 工作灸担。所以，无 
论选择啷一种枢架，确保是枢架在为你服务，而不 


是你在为怄架做牛做马。 


r-^i fcfaU /JL- cda 
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加入内容容器 


使用 blueprint CSS 规则为 RPM Music 2 . 0 渌加#式 


有了可用的 Bhjeprim CSS 规则，现在你可以卷手 RPM Music 2.0 的 
XHTML , 只要在你的 div 上使用类属性 即可： 

<div id = r , header M nl nrrjp ^ 

所以 “headed div 在这里 将楢跨 24 个宽 30 像紊的栏，这是页面的整 
个宽度。在该 div 里，你可以有其他横跨!6栏 ( span -16) 与横跨8栏 
( span -8) 的 div , 以达到黄金比例^* 

继续将这些附加至你的 RPM 的 index.html 的拷页中： 


类來仓 Biuepunt w # it % B 
為 迮值用 Blueprint CSS 规则来 姿摒这 
个 6 的侶1。 


CDOCTYPE html PUBLIC T, -//W3C//DTD XHTML 1.0 Strict//EN ,r 

ir http ： //www t w3^org/TR/xhtmll/DTD/xhtmll-sti:ict,dtd t, > 

<html xmlns= ,, http://www-w3*org/1999/xhtmr , xml [lartg-^ers 1 * lang- M en ,r > 

<head> 

<title>RPM Music</title> 

<meta http-equiv= 1, Content-Type ir content-^text/html; charsGt=utf-8” /> 
clink rel= M stylesheet ir type= ,r text/css t# media=*_screen’* 
href^^stylesheets/screen-css^ /> 

< i — [if IE ]> 

<link rel^'^tylesheet'* href^ ll stylesheets/ie*css ,1 type- ri text/css 11 
media= M screen / projection*^ 

<! [endif J_> 

clink rel=’. stylesheet/’ href^^stylesheecs/rpm^css 11 type= M text/css 11 

media= u screen" /> Bi«epTint 僅用分类巧的 rfiv® 

起内容 。 


</head> 

<body> 

<div id=.Vrdp. r class= ,l container ,1 > 



<div id="header” cl ass~ rf column J ^ ^ ^ 

<div id^nav" class s，r column span-^I^asOSite Navigation</div> 

<div id= lt mast 11 clas5=' , coIumn span-24 last 1, ></div> 

</div> f 5 : 8 几 4 筹子 2 / 3 : (/ 3 t 

#桀下一枝 空全。 ^ 

<div id- n content' f cla^s- ll coijfftfn span^fs^olborder last">Main Body Content</div> ^ 

<div id=’_sicieba:c’’ class-^coluirm span<Olast 1> >Sidebar Content</div> 

</div> 


这®个 <仙> 洛 W 后增加内 
容残留5空问 。 



<div id= tf footer ir >Footer Content</div> 
</body> 

</htmi> 



网玷 ii 的备个主龙无棄郝電龙该子名称以 " CDkmM，P 
的类 (cUss) 0 Ci 稃 g 法知 Bi«epii”e 衾摒 ; feffei 的方式。 

苐二个 (fc Uvan - xx ) 則苦 b 祛无棄棟跨的程數。 


index.html 


哉们 ( 5 存处理 ijirfer , fumt £件。 
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殽上你的 RPM Musics ft 


布局与设计 



玎认潘着 R 站加上 A 铱喵圬 
封®后的样孑吗？ 


O 


At the Party with Hector Rivera 

Hector Rivera, 纽约拉丁灵魂之王， 1966 年发行的 《At the Party》 引起一时的 
轰动，闯入 R&B 最热门专钳的前仙名^这张经典唱片能 U： 人彻夜狂舞，保证成 
为你收藏中戢喜爱的唱片之一。 

Hawaii with a Bongo Beat 

LeRoy Holmes 又做到了 t 这张融合了 K 威夷与纳什维尔风惜的专辑保证会带你 

回到热怙的岛屿或乡村。带走这张 唱片， 聆听你最爱的热带风情经典歌曲 «Thc Moon ofManakoora)) 

以及令人愉悦的 《Mahilini Melc}> . 这逛适合全家人听的好音炻。 



Dwamin , Wild 

帅 {if 二 ift 唱 Donnie and Joe Emerson 给你带來这张述幻摇滚专辑。他们的畅销金曲 《Don't Go Lovin' 
Nobody Else》 会使你哼唱不绝。收藏家必备， RPM Music 独家限时特卖。趁热收藏吧！ 


XMAS A Go Go 

本周的神秘唱片， 呑起 来非常适合加 人任何 圣诞歌业的收藏。某天，它突然出现在 RPM Music 的仓庳 
甲 .， 我们已经标价出仏％来一张神秘历史里的 XMAS A Go Go 吧！ 



将上述内容加入你正在制作的 RPM Music 网站主页 一一 mdex . htnnl 的主 < div > 
中。考虑如何将内容插入到适合的 地方： 它们是没有顺序差别的相似项，但或许 
都需要加上样式^各位可至 Head First Labs 下载唱片 封面： 

http: //www* headfi rstl abs.c om/b ooks/hf wd/ch 04 
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内容 vs 样式 

麻较夜話 



今晚 主题： 对用户而言，谁更重要？ 

内容与样式争论自己对用户体验的重要贡献, 


样式； 

你 知道，我典觉得这个话题不值得在这讨论。你 
看，网络是一种视觉媒体，大家想要美观的东西。 
如果网站看起来不怎么样，没有人会关心它的内 
容。 


是的，早到儿西年前那么早！ m 是现在，样式与 
设计才是一个网站的注册商标，它们给予网站自 
己的特征与个性。 


我的应力也很大！何不想想导航系统？如果我无 
法让受众从网站的甲地到乙地，他们永远找不到 
你。更不耍说屏幕尺寸、文宇大小以及我所做的 
一切事项的可用性。要管理的事项很多，可不像 
你想得那么容易， 


你以为现在是什么年代啊！ 1995年吗？没有 CSS 
的无序列表与文字链接？苒没意思。 


内容: 


没什么好讨论？你怎么能这么快就忘 E 万维网 
(World Wide Web ) 的发源地？ Berners-Lee 提 
出 HTML 来协助研究者分享及更新信息，尤其足 
科学研究信息 & 早期，内容就是王道。 


没错，但若没宵写作贫好的内容，即使是拥有 M 
先进 CSS 的最佳设讣的网站也无法持久。图片与 
任何花哨的三栏式布局只有一定程度的能耐.我 
们的内容必须清楚，简短而且容易阅读。否_. 
大家就不会关注。別让我开始啰嗦关于未回答来 
访者的问题所造成的下场， JT 玉力太大了！ 


导航？用无序列表和一些文字链接不就可以了 
吗？典受不了你们这些图形设计师…… 
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样式: 


谁邀请他来的啊? 


我说 • 现在没人会讲那些过去的历史了。当时 
大家都还年少无知，完全忽视了分离标记与样式 
的.情。对了，内容跑到哪里去了？ 


所以往事就一定美好吗？现在我住在 CSS 文档 
里。 我现在比以前更有用，而 觅也不 再被标 
记缠得无法动弹。对我来说，现在肯定更好。 
如果硬要发表什么意见，我是真的在帮你们！ 
现在你可以自己独立了，不管你是为了什么 m 
大原因而独立。 


……我该把刚才那些话当成赞美吗？你要知道， 
不用处理你那些到处出现的 <p> 对我来说才是一 
大福音。总之别忘了考虑我。 


内容： 

<markup> (标记先生） 

样式，你还在抱怨内容吗？你不记得以前那些 
待在内容身旁的日子了吗？当年是我利用 < fom >、 
< i >, < b >, < table > 等标签帮助你待在内容的旁 
边。 

</markup> 

<markup> 

样式表的确很好，但你想想过去的那段日子…… 
无穷地嵌套表格、标签里填入使用十六进制数字 

表示的色彩以及最让人喜欢的空格 GIF 文件…… 

</markup> 


不好意思啊，标记先生总喜欢跟着我四处逛^不 
过，他说的有根有据。你以前只不过是 HTML 泥 
淖里的标签而已。 


你移到 /stylesheets 目录后的确让文件千净许 
多。这确实让我和标记更有机会互相熟悉。少了 
你那些西处埋伏的无意义的标签后，真是让人惊 
讶于你的缺席会有多大的帮助！ 
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为 rpm music 的内容加上样式 



以下是我们在 RPM Music 2.0 里加上专辑封面、说明与标题的方式。你的成果如何? 


<body r > 

<div id- N wrap M cIass- Tl cQntainer f V> 

<div id= M header^ clas5=^column span-24 last"> 

<div id-'^av" class=’’colurrm span-16 last_’>Sit:e Navigation</div> 
<div ideujnast:” class- T, colunin span-2^3 iast n ></ciiv> 


这 f P •甚专 

以洩 们值用 
无硌麫 表 



</div> 

<div id-"cont 

<h3>New at 
<ul> 


ent’* 

RPM 


class='*column span-15 colborder 

Music</h3> 



細 ㈣ 敍物 


<lixdiv c:la9s =1 *column span-4 11 ><inig alt^ lf GOver 1 H 

grc='"images / cover!*jpg (l /></div> 

<h4>At the Party with Hector Rivera</h4> 

<p>Hectcr Rivera f the king of New York Latin Soul really makes a splash with 
his 1966 release <em>At the Party</©ift>. Climbing into the R&amp;B Top 40, this classic 


album will have you dancing all night: long and is sure to become one of the favorite 


records 


in yotir collection,</p> 

</li> 

<li><div clads= ,l coliimn span-d'^Ximg alt= ,, cover2 M 

3 r c=’_ image s/cove 3:2 .jpg" /></d iv> 
<h4>Hawaii with a Bongo Beat</h4> ^~ ——— 


㈣㈣ 以 

css 说， H 具样式。 


<p>LeRoy Holmes has done It again with this Hawaiian-Kashvilie fusion album 
sit jt© to take you back to the is lands ^mdash/ox 1 the country* Pick up this record and 
listen to your favorite tropical classics like ”Th& Moon of Manakoora" and the always 
delightful "Mahiiini Mele. M Great music for the whole family_</p> 

</li> 


<li><div clas9="column span-i^Xinig alt^^cover3' 1 

src="iinages/cDver3,jpg ff /></div> 

<h4>Dre am i n * Hi ld</h4> 


<p>Th© hunky duo of Donnie and Joe Emerson bring you this psychedelic rock 
album for tha ages. Their smash hit ^Don^t Go "Lov±n g Nobody Els« rr will have you humming 
for days. This is a collector^ item and is only being offered for a limited time here 
at RPM Music. Get. it while it/s hot*</p> 

</Ii> 

<liXdiv class="colunm span**4 t( Ximg alh"cover4” 

src=’_images/cove3 ： 4.jpg r ’ /></div> 

<H4>XMAS A Go Go</h4> 

<p>This weeks mystery LF looks to be a great addition to any Christmas music 
cal lection. This just showed up one day in the RPM Music warehouse and we^ve priced it 
to sell. Get your piece of mystery history with XHAS A. Go Go,</p> 

</li> 

</ul> 

</div> 

<div idsusidebar” class= f, column span-8 la 5 t ,r >Sidebar Content</div> 

</div> 

<div id- ,f footer ri >Footer Corttent</div> 

</body> 
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RPM Music 2.0 看起来如何？ 

电新你的 index . html 并用浏览器将其载入, 



禮 . 屬玲的排利斿不整 

— 哆 样式， 使网格 的轮廊瓦 

^-^ 




*3*ih 


m 科《 •界 |bf^ "M a| i - i _11 

Hhi c+*^s ^ T » *5 




arc^q 

rt p^pFfi 


•nitron 


■ 納 W _ 



_ ,_ _ Bongo BMlt 


h*w tap iF| tN 
ai/vp 


料 Hn^,. ttfli 




看起采考轺対 © 
约占 f/ 3 的空问 , 

2/3 的空问。 




- 

I 





加上一些清理布爲的 CSS 

给 JTpm . css 加上一些简单的东两，应该可以大幅 沾理布局: 


p, ul. 

li, hi, h2, h3, M f 

设定茗些常用沔否充棄的 


margin: 0; _ 

这界笱 o p 

1 

V" - ^"■ 


h3 { 

) 

margin: 0 0 20px 0; 
padding: 0 0 5px 0; 
font-weight: bold; 
border-bottom : Ipx solid #ccc; 


ul ( 

list^-style-Lype: none; 




rpmxss 


#content # #sidebar ( 

margin: 40pK 0 20px 0; 

} 

Scontent M { 


at ^ ^content 规时将铋助摒? ；) 嗒埒。 " Ihts ^ tte - type ^ 
将全©移铨埸埒列表前的场 0 符 I 。 逢常锖 况下， 
场0符咢： a 孖彝®,佴在 ci 个索刎 中不電罢它们 ' s 有一 
场重爱總則則甚游 content U p 对下达界的 ffi ■定。这场 規別 


font-weight: bold; 
font-si. 2e: 1 .^em; 

} 

#content li p { 


砝保 S 个 <i £> 郄检砑金在男一个 <〖;> 上 ® « 


margin : 0 0 70 px 0; 
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rpm music 的内容最终定案 



H [圉 - 

RPM Music 2.0(1) 准备好接受测试了。 

豇新你手边的 rpm . css 并茁新载人 RPM Music 网 J 占。 
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焱部的这柩钱岛竽沭样 式这分 了页芎彷決 
S. 4 島内容中的杉 . 迪荀 3 S 分。 


m^o . j , 


■ ' . ■ 


Nmrst RPM Music 


At tKa Party with H*otor Rhma 

HAcevHsm A.ltfogof hlM YortiUeln W wiry rr^ku aapiah 一 A 物 
1 m *#w« A £h# P«^ <^7 «|呻 imo 相 T«a 极拥 •山 Mlc 成 

dinting aiit^rtlcyg and liiuntoboQoiTWOHDiQvraA^wanlt 
inyfljr OQfc^on. 


Haw_B wfth ■ Bongo Burnt 

Uf^ KQCmi*hdAd3r4lt«0ii^ wtlfi W% H*wMUn^hJ 
tat^^bxAtamattiMs-of trwoRjn&y. fVMui 
IwrfiWDrtbttropictf list* ^Tb« Moon Q| Up/ 

A Ut*idlnd M#«, OM mnic tv V41 


布点简承，侄我#欢 6 有点係 
AmazoH . com , IS 我舀然亲货能在§ 
象附坻的兵崧品。 


OrHmki , Wild 

Tint FuniKy M oF Donr>4 M J9* Emnon tr- 〜 j you ETdi psydWic 

鏖 bum To# tn« «QH. TW vwn W Do^VI Ga LCV^rV |Vl«M|rBHr wto hm yw 
lwvmr>oivd«yi Iht* it«oon«do^iitvr tnditoNyl^ 咬 0^«4 lor. 
lurtiia tiir^ « npM 4t uni i« re 1 * noi_ 


O# ytvp«p*crfi 


XMA 3 A Qq Go 

Thtfwtriqfnyflirv 履 gwe ■A^tootomy Civiiiirii muc 

ffiMoon ttwi jin ； vuwtd 坤 aw _ 朽 m* rpw hMc _wiraj» and _ 

mya^ary 


hntDiry wltTi 39MS A QO- 
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完成沟容鸟导航的标圮工作 

再多加入一点内容，给 RPM 老板哲看我们 H 前的成果6请把下 
列改变加到你的 index . html 中： 


，'財 ) 用 Btuepiinio ii -次 。 嵌们气 

供的鉍括铥 ©中 ， 


<body> 

<div id-^wrap 11 class = "container M > 

<div id« N header M class* v, column span-24 last lf > 

<hl ciass~ M colmnn spazi^S last M >RFM Hudic</hl> 

<div id=’’nav" cla s s= 41 coluion span-16 last M > 

<ul> 

<li c 1 a s s= tr act:ive 41 Xa title= r, RFM Music home ir href^ 11 # fl >Home</aX/1 i> 
<XiXa titXa— f, Music Store" h r^ f = r, # H >Mus ic</aX/I i> 

<lixa title= n RPM Blog，. href="#_.>Blog</aX/li> 

<liXa titXe- f, About HPM Music，. hj:#f- ,, # ,, >Aiout</ax/U> 

<IiXa title;"Shopping Cart H href^ M # H >Cart</aX/li> 

</ul> 

</div> 

<div id="mast" class—"column span-24 last n ximf alt= f, rpm guys'* 
src= H images/rpm 一 guys - jpg" /x/div> 

<div id- 1 'subheader 11 class-'column apan-24 last f, > 

^ „ " 

<h2>RBM Music x& the #4 online, midwest 

■ ■, •' ^ ^ • 畢 ’ : 、 名 ， § m ■ ■ • - " -,1 

music r©tailer</h2> 

- ¥ 

</div> 

</div> 

<div id= ,, content ,1 class- ,r column span-15 colborder last ,r > 

<h3>New at RPM Music</h3> 

< ul > 

<1™ Album listings from earlier _> 

</ul> 

</div> 


<em>«hrink-wrap</em> 



以下甚体睿祥本 & n 
RPrtrt/VWie 傅客中抽出 内容. fs 圣 0 

笏钐 H 僅用假 i 宇蓳 现云 f 排埏后的 


<div Id= s，t sidebar ,1 class- fl column span-8 last M > 

<h3>Prom the Blog</h3> 

<pXstrong>Nov 4</strong> smdash ； RPM is gearing up for the holiday season and 
stocking up on lots of records for the post-Thanksgiving LP rush. We should be flush 
with inventory and m suspect that we^ll have some cool new specials to announce later 
in the month. Check back soon for the holiday R£H madness.</p> 

<pXstrong>0ct 20</ati:ong> Smdash; He just received a nr^starious package in 
our warehouse full of Christmas albums that seem to have originated in Japan. He are 

9 jsr 

currently investigating their origins and if everything chacks out, we r ll have them up 
on the sitfi for purchase. Could be the makings of an RFH Music excliaAive*</p> 

<pxstrong>Oct 7</strong> Smdash; Hew specials ace up on on the site as of laat 
night. Be sure to check out the LP’s that offer frae shippingX/p> 

</div> _ 

</div> <!— end ^container 1 * div --> 

<div id =,1 footer ri > 

<^p>Copyright ficopy; MM Music, all rights xm served*</p> 

</div> 

</body> 



0 笏只銮阇牟加上费辟 S 的魬权声明就孖了。请 f 主金. 否埤 g 

的<仏>沄子宕鈎主龙内容的< 枷〉 之外。这样印可让毋蜱这4 
网劳焱叇桷跨全部窗度。 



index.html 
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垂直比例 



我们使用別 ueprlHf 加入氺乎方 
白的黄金 et 倒。 如 果注垂 I 方向 
也想 gffl in r 1/3的比倒，法 







I 1111 I I 


垂直比例通常需要图片和 CSS 定位。 

使用类似 BliiepHiit 的框架，使网页的水平方向采取黄金 
比例算是相对容易的。但是，该如何构成趣直方向的黄 
金比例，例如主要页头围片与网站其他内容的比例？ 


: vrw ^： 

I r 

s. I 

I I 

r'_ 

II 

■ . ■— 


我们存望主; i 历共 ® 圬占 
有 i/3^i £ ^ 度 …… 


’二…页兵 T 的内窖剌 
与 2 / 3 的库度。 


你可以从设定图片髙度为（用户的）屏嵇实际垂直髙度 
的1/3开始。但接下采必须使用许多不同的图片，甚至 
使用可怕的1像素透明空格页。还有页头里的页面部分 r 
导航拦、网站 logo 、 任何标题 …… 一切很快将变得混乱 
不堪 


较好的解决方式是制作一张比例恰当的背景图，像 这样: 
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的©妗也巧奩用三 
分法。 




body 



background : 


} 


300 px 


廷整休的背景笆 
下 ）a 
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«0( 

■% 

H. _： _ . _ _ ■ - ' r _ 

Jt Mb + 應 _ . * 

> RmiMte. 




■ ■■ 〜… 


— J 


RPM Music 


Hofno 



RPM Music Is the #4 online, midwest shm^ 


New at RPM Nxmic 


_ 譯 \ 




= 不差个尺 ； 定的 
再重4达瑰 a 


(px 宽的听 ffi 侈将子 



#fbf9ef url("/;lnig/header_bg*gif) 
repeat-x top; 



这段代砝将在莉否负諸後命穿 
联 heaAet_i$ . sii^ 
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英三«沐 
在連衫主 

©■ 的资。 
蘇 lr ' 行 
isf(i ^ 签 









加上鼠标移过区块效果的导航 


认更多 CSS 加入布爲及編排细节 


以下这些 CSS 规则可以整理所有刚加入的 XHTML 并设定格式。沾祀 
它们也加入 rpnucss 里； 


body ( 

margin ： 0; 
padding: 0; 

background: #fbf9ef url(-./images/header _ bq,qif) repeat**x top; 


} 

p, ul f li f hi, h2, h3, M f 
margin: 0; 


h3 ( 

margin: 0 0 20px 0 ； 
padding: 0 0 5px 0; 
font-weight : bold; 
border-bottom: Ipx solid #ccc; 


ul { 

list—style-type: none; 

} 


#nav f 

height: 50px; 

} 

#nav ul { 

float: right; ~ — 

} 


这个与权的宏 fe 万式将 



Can 


RFM Music 


m 


紗 - 

=1 


Musk: 








只甚多加一昝 ess 想則，却将帯 
来一个異现 * 功钱齐金的马权- 
阎的 让网玷 曼容異使用。 


riii 


分贡核 


#nav ul li { 4 

float : left; 
padding; IBpx; 

} 


hau ul tit tfy f 5 px 这猫将 
於 <«>彷 签拢 供変大 和肜成 
方块衫徒的空问。 


#nav ul li a 1 
color: Sfff; 
text-decoration: none; 


padding: 15px; 

font - size : l,2erti; 

} 

#nav ul li*active r #nav ul Xi;hover { 
background: #333; - 


这筠 拢釗鸩 突出分类 • 

# .Active 的 < C ( C ^ 杉 
苍。 g 让用户知迮点违鼠 
杉后笛枝的页®。 


ttfnast img { 
float: right ； 



甘 mast i 员決 S 的主我 fD 存望 
锊它移幼封网页的右側。 
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fheader hi { 

padding: 10px 0 0 0; 
font^sisce: x-large; 
font^weight: bold; 
color: #fff; 

} 

^header h2 { 

margin: 8px 0 0 0; 
text-align: center; 
color： #fff ； 
font^weight : bold; 

} 

#header h2 em { 
color: #ccc; 

} 

tcontent, #sidebar { 
margin: 40px 0 20px 0; 





rpm.css 


#content h4 { 

font-weight: bold; 
font^size： l_4em; 

} 

tcontent li p f 
margin: 0 0 70px 

} 


0; 


#sidebar p [ 

margin: 0 0 lOpx 0; 

} 

#footer { 

border-top: 5px solid #928977, 
background: #a9a294; 


#footer p { 

margin: 0 auto; 
padding: I0px; 
width: 950px; 
font-size; l.2em; 
font-weight; bold; 
text-align: center 

} 



达昝差英脚 g 的规則，舍值英脚梯跨整个 
网站的 疚叇， 话吁包含叼格 的无素 2：外 。 
使用鸟网絡©相阌的宽度 （ 95 0 px ) ,斿 
VA 0 AUtO 值此 S 内容蘯中，可铪我 

们錡求的布易。 



r ruo 重点是设计，页不是 css 。 

52^如果你不是很了解这里的 CSS 规则，没有关系，你可 

以参考《深人浅出 HTML 与 XHTMU CSS» 来了解更 
多细节。目前只要专心研究我们创建的网站外观，以及如何使画面平 
衡、荷组织并遒循黄金比例就可以了. 
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试驾 



RPM Music 已经准备好上路了。 



起来像昱 【 999坪以 
后“户 物*兩2看 
起来常心悦0。 


更新 index . html 与 rpm . ess ， 并从 Head First Labs 下哉任何缺少的图片^然 
后看看你的工作成果： 


mno 


Wf Wkitk 


Ig 


RPM Mus e 




: r:?y :c r 






. 

• ._ 


•C 




OiTi 
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Hew at RPM Music 


At the 

HttSOT RJ' 

19 &S rbUMi^i 
i^aveyDu oanc^ 


唼 f 我戏 泠苒也 不用出 n ?。 如 果我玎[乂盅 
摟在 RPM Music 上购钤，何必出门唯？ 

窩效的 R 站…“ • 


lay u«aon 2nd 

invenfl(?Q3r>d 抑 

oooi nm 


Hawaii with u Bongo Beat 

Ltftoy HciTTw h» do^trt Kjiiniwt^tfiis ： m-NBf>vi" -i i mi&n U^tjm iur« 

£otMA rcu 泣 tills rs ； flnds—(Kitifl ^ountfy Ptc* no itus rtco^ arid hsion lo 

youftt^ws tro&cs ciAs^a 卜 *® w»n or amo ttva aiwtyv 

dfii^rittui ^afii'ini Gfts< onsic :he fctiois^afTd^ 1 


Oct 20 - 物 just ttcfrveda rrv^t 的 ou& 
*artfiou« full of C1 tlbiita& arbun%matf 

g in #； 的 m j»*rv 物 w cufrr^ 
origins tna ii evwyttiiiotfitciu m 
&n iti* t ie fc^parcnua Could 
y^jsic bduslv^ 

OtlJ - 的 edUtMuD 」 

nignt. Sesufi^to 0>eck olH li 
















































□ □□□□□□□□□□ http://www.pin5i.com/ 

布局与设计 






复习要点 



■ 问卷调查是取得受众的广泛信息的绝佳方 ■ 三分法是根据黄金比例创建网格的简易快速 
式， 版本。 


■ 自创角色是典型用户，使你的受众具体化并》 
代表他们。 

■ 屏幕实际面积是指设计师面对的设备的屏幕 

上的可用空间， ■ 

■ 分辨率越低，事物显得越大，也将占用越多 
屏給实际面积& 

■ 在设计布局的纸上作业阶段，网格能提供秩 ■ 
序与视觉逻辑 I 

■ 黄金比例能建立更加赏心悦目的设计 a 


CSS 基于网格的框架是种特殊化的 CSS 文 
件，包含所有必要样式，可用于依据 CSS 中 
的网格编排你的网站。 

CSS 基于网格的框架的目标是让设计师聚焦 
于顼目特有的任务上，而不是重铤前人做好 
的工作0 

显示鼠标移过区块效果的导航系统，可在用 
户点击链接时提供链接前往处的信息 A 
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5 运阁毯彩设 i + 


命 


走出单色的世界+ 



色彩是 Web 设计时的无名英雄。 一个好的调色板可以吸引受众进人你的网站， 
给予洗礼般的强烈冲击，而 Jli.l: 他们还想再回来。当提到色彩与 Web 设计时，不 
仅仅是挑选 好看的调色板而已， 还关系到如何 运用这 些色彩。你可能选了不错的 
调色板，但如果使用不 慎， 大家仍会唯恐避之不及 g 读完本窠，各位将不仅能熟 
悉色彩对网站用户的影响，还将学到选择美观的调色板 H. 适于（甚至能补宂）你 
的以用户为中心设计的网站。 


进入新章节 159 








9 rules 

帮忙支持本 M 眘乐活动 


你为 RPM Music 设计的网站非常受欢迎 6 唱片行老板 Sam 收到许多好的反馈, 

因此他打符扩展准业版图》创建一个报道本地音乐活动的新网站 SimpIeRate* —— 

他希望由你设计这个新网站。亊情是这#的， Sam 在脑中已经有了构想，他希望 

新网站加人 9rules Music 网络 （http://9rul«,com/imisic> ,如染这个新网站成为 

网络的一部分’表示唱片行和网站会苻许多曝光机会（当然也为设计若带来曝光 
机会）。 


3要有戰们 违达来 
$分稅表 • 也敗作 
的同耷 


Sam, RPM 的老扳及 
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9 rules ： 博窖 R 絡蓄选 

今夭的 M 络 tli: 界也到 处都是博客。问题赴博客太多了，多到无法知进哪 M 才能找到好博客。 
这就是 9rules 登场的地方 a 9rules (http;//9ry les.com) 是博客聚合器 (blog aggregator) 

与傅 其叫络 （blog network) 的混合 体^ 它联合网络成贝（通过也题如音乐、摄影、科学、 
设 L1\ 游戏等组织）的文章，为希塑找到优质博客的人提供了优质内容应有尽存的好地方 s 




9 rules 


rJfT. Iff - .i 


Mu»fc Communtty 

ncm rrtuwC 'U* 


rOL0 W 45«>1 VJF frn^c 


fal torvGutart 

私 i-p J*p ■ 


novonYouTuda 


EiMtiorr fiMio* B^ng 妁 ywi V«ed* ilkcw irom today 
and rsfi^vA tw t 彻 gMt 



ONE DAY ONLY 



g faq>i tufcj" 


9rules 







' V ... 


itStmpteR^te ^： S ： 97 uUs^ 

Music !S> ^ # 将巧 RPM M ⑽ c 4 

线商店带来人涝，或许 3 带柒 
:轚在的商机 


现在，该如何1上 SimpleRatc 登上这个网站？ 9 rules 周期性地有一段24小时注册巾 
的的流程。在这段时间内，网站站长可以提交他们的陴客以经市仵为成员。鉍一段 
注册期. Wiiles 平均只接受30或40个网站(申请者则有上千个网 站）。 总而言之， 

能让 9riiles 接受注册申请已逛-大成就,也是许多设计师、内容厂商与博客用户_ 

「 •# 珑雜脑- 

想登上 9 n ] les ， 不仅需要此秀的设卄_让 M 站在找时被注龙到的三种 
有效方式是什么？ 


* 编注： 9 rulcs S 为种种迕山，2009年晳时采用 不眼时 间的开放中清 1 从180开始 实法。 
坏惰请 3 t : Ii » p ://9 rules , com / abou (/] oin/ c 


目前位置 ► 


161 




























samplerate 的大挑战 


选綠很有跟 





fam HI ■■ 

■■■ 


Sam 喜欢我们提出的分镜表，只是有项但书=他已经想出 SampleRate 的 
logo , 无论我们接下来怎么做，新生的 SampIeRate 网站都必须要与 Sam 挑 
选的现有 logo 水乳交融。 

这表示有些选择已经超出我们的掌握，例如色彩^清看希 SampleRate 的 
logo ……它对我们的设计有何贡献? 


@ 5 Sam 决定给 
用的 


其他部分的意釤。 


送择？字型，所以敌 
们或锊虑孩在网站中值用 
运个字埂 。 


稂喜欢这个存资共 S 故 
入吉的©的点孑。 


SampUR & t 0 的设竹 3] E 當阂荦：一 
个 I 现内容的主括 ； 一个者在的 
倒裎，用来！现銥外的鉍节。 
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急彩異有惰緒影响力 

你第一眼看到 SampleRate 的 logo 时有什么感觉?无论喜欢或 i 寸厌，多少都会有所感 
觉到什么。这是因为色彩创建情绪 (color create emotion}. 例如 , 红色会联想到兴奋 , 
紫色惑觉商豇而芘严，黄色使人欢欣鼓舞，蓝色则有种舒适 4 安佥的感觉。 

当我 fl' 】设讣一个阁到强烈色彩的 M 站时，必须思考色彩产生的怙结。色彩运用合说的 
H 豇能 给人搖种感受，荇在网站设计时井未 布意 地使用色彩作 X? 设卟元老或 M 站的 
色彩运用不佳 , 则不会产生这种感受。你应该把色彩视为一种设计元尜，它与导航、 
图片或内容一样重想 a 

猜看下列无拘无柬的色彩每使川它们的网站。我们会情不自禁地产也某些反应……这 
就是我们希砑 SampleRatc 达到的效果：强烈正面的反应！ 



MrikH uhii .BW tHi BdalHMi 

BJLTUHA «0«CEflTY AKTSMUtf 

HOI ff 






ir^hAiRdpps 
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色彩的情绪冲击 



玫越 


请看看下列四张屏幕截图，写下你看到时的感受。欢迎使用任何你想用的形容词6兴 
奋、好玩、快乐、悲伤、好奇……写下你的任何感受。 


O fresbairapps-cow 





fresh AIR dpps 


_h • mm 




r ，《|i 



■If- 


g k h j M-Tk 



dOOO< 


ooooc 


«■ 蚊 — 

-m* 

OOOOI 


ODOOf 4 
0000{ 


o 

o 

o 

ti 


r* 




• 逆 ■ 


Dw^tTKif 




^il. _ fill— ■ ■» 

' 一 ■•… 一 -■ ， 旧 、1 

*■ ■ ■ » ■ ■_. __ _ _ _ _ _ 一 _ .. . - 、 2 _ - X ■ .■ 羼 -. 


*, -m m -m * 


❺ bigbluedev.com 
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o eaxtonstreetfestivaI.com.au 



NOW 


HAS BEGUN ! 




iT*j 


* 


罕 




甲 


r 


O le-moulin-desauvage.com 
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色彩与情绪 



g 毯（用瘃表现天空）， 
味新 w 的感 f ,整个视党 


tSurfrMI 

MASeEGtUC 


(a 个网贸 i ： 的幻:毯来 t 龙钉的嵌笆，#作巧整个沔 
页的巷社运6本？5$浔明高，攻泽 S 盂赛祕晷现了 
内容。 
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爸轮（一切的孖始） 

始思考 SimpleRaie 该用什么色彩前， lh 我们先认识设 计界的色彩工典 
之母一—色轮 （ eo ior wheel) 。色轮（冇时称为 cWor 是显示出 

各种色彩并呈现这些色彩间的关系的环形[冬 U 

色彩关系足乂键……色轮比我们选出辽动良好的色彩。先从寻找 
SampleRate 的 logo 色#开始： 


pleRate 



SampteRate ^ io $ o 爱的釘色鸟嵘 

地 O 糾 ; g, 士 

(compt'unenta7\f coto^ 
有吋#巧对比笆） — . 




色轮根拍三琢色（叙、 

强 m S ) ， 三，1■运（黄、 
看、洋釭）以苁另外六 
科 (忘合 和部并运布形咸 
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色轮运作中 



请看下面的网站，于色轮中圈出每个网站的主色。圈选出色 
彩后，试着画线把它们连起来。注意到其中的模式了吗？ 



逸 iS 个代表网玷 的生急 4 犹 其毯彩 
不 &0 常沧砝也沒兵系,只； i 尽可杜 
洼出毯 fei : 蚤相迫 的毯衫 9 


S15 TICKETS OH 
SALE HOW! 


HAS BEGUN! 
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dora foftw t 

lk# . *I，.S |T4^M^ ^ 






Lhefaergement 


S ： ! O'Jl^ri Ljtj tCTjrfsi t-l CTr«3jwrS 


nwa« pt^r Irrr Oi pcinort.,, 


Dcs ptfcbci cf^wrs« ct varf6« ] 

Co. spr-i#s^rt cr< pj? rxm ^ 

yiin?. tjjP'. S3J& ■ 'np^» m. , w 

Tcwt cs'iLbo^d. U ^i«r 0" jn untfr# * £ 
T«.f fhit 'ppf *^rw. t*- 


undrev 


f* qL^ » 

ar«o*\M. fcjr I 


■ iJP\ ch#an0rcs 


■ \A 秘叫 


目前位 置 ► 


169 























有时係金崎到方 索中的 
茗个琶衫设枋 巧逄钐 
的样本毯 ( smuh ) 


识别色彩模式 

使用毯轮选择“亙动良好”的色彩 

或 i 午已经有人开始咕 哝： “是的，色轮 K 是好，好得呱呱叫！但我该如 
何用它挑选出相处和谐的色彩，而不会像足打翻了调色板呢？”这就是 
配色方案 （color scheme ) 派上用场的地方了 s 色方奕不只是 * 组色彩, 
而逛一组互动岛好的特定色彩， 

以 T 迸-个起始点；所苻良好的配色方案都从萆一色彩和便利好用的色 
轮开始。 


㈣ 站 


Le t'Aoulm 


{A& 


的签毯。 




上面的网站整体采用非常深的绿色。这就是网站的 基色： 敁能衷现视觉隐 
喻及所有其他色彩所基于的色彩^我们必须先为 SampleRate 选择一个基 
色。 然后，其他的一切^配的色彩、色彩的深浅、色彩的饱和度，都 
依据基色来决定。 

但别太紧张！基色没有对错……而1如果不喜欢某种方案，你随时都可放 
弃并朮新开始， 


曾先, 


迭綠你的棊 t 
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认 三色方寮 创建实用调色板 

配色方案冇各种菸样的变化形式一一而且链种都有花哨响亮的名称（承色方宠、 
奥比方案\互补方案1三色方案、四色方案等）。别担心，不管名称，配色方案 
只是极商负的网站调色板 (color paletie) 挑选方式，把配色方案当成另一种协助 
网站设计的工乳就好了。 


三色方案 (triadic color scheme) 
足敁常用的配色方索。它使用三 
种色彩，三种色彩在色轮上的距 
离相等。所以，当你选定基色后, 
画个正三角形.即可选出另外两 
种色彩= 


三毯方 ff 逢用的所有逄衫 
4笆給 i ： 的皞奥和筹 -® 
此具中的包」与琶彩伪芍作 




毯衫在疤轮上的降逢丘 

數考的人泰土― 

知#-甚铥 〖20 & 

选一种疤衫， 



根据 SampleRate 的 logo 创建一个三色调色板。请记得从基色开始建立调色板, 


习« 


■■ 




SampleRate 
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三色方案 



我们使用深绿色作为基色……得出如下调色板.你选择了哪些色彩？色彩的组合让你 
惊讶吗？ 


9鑷蓐答 








■ 




SampleRate 









* 





动动膣 


三色方案里的色澎居然与 SampkR 脱的 logo 非常不同，你感到惊 
讶吗？你觉得这是个问题吗？ 
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运用色彩设计 


孖始为 SampkRate 加上标记 


我们的枒:僅 
XHTMC Stud 杉共。 




<ID0CTyPE html PUBLIC 1f «//W3C//DTD XHTML 1.0 Strict//EN M 

n http://www P w3*org/TR/xhtinll/DTD/Khtmll^strict *dtd"> 

<html xmlns= ,1 http://www.w3.org/1999/xhtml ffr xml:lang= ,i en 1 ' lang - u Bn u > 

<head> 

<title>Sample Rate</title> 

<meta http-equiv= ,, Content"Type ,1 con tent-' 1 text/html ； char se t-u t £^8 H /> 

<1 ink rel™ tl stylesheet ,1 href-'^tylesheets/screen^css 11 typecutext/css’ 1 
media^^screen" /> 

</head> 讳 4 认样式表的 引入， 它 Bi 氣致 

<body> 在 / style 0 录里。 

<div id= r, header ft > 

<div id^ 1 ' logo^ximg alt=._sample rate logo.’ srG= ,p images/samplerate2.gi f ,p /></div> 
</div> 

<div id^nav.) 

<ul> 

<lixa class =1l active ir title= ,l title M href= 1l # l '>Home</ax/li> 

<lixa title” href= ir # ,, >Archive</a></li> 

<li><a title= 1f title” href= ir fl TI >Music</a></li> 

<li><a href= lt #' , >About</a></Ii> 

<li><a href= ,l # ,f >Contact</a></li> # 

</ul> 泛基老板想在网站丄•看到的吉蝕®样 

</div> 

<div wrap "〉 

<img id=*_masthead" alt=' , header image" src= M images/gitfiddleopg ,ff width- H 740px M /> 
<div id—"content 1 ^ 

<hl>Heading One</hl> 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit- Fusee 
consequat arcu in maurisx/p> 

<hl>Heading Two</hl> 

<p>Lorem ipsum dolor sit amet f consectetuer adipiscing elit. Fusee 
consequat arcu in mauris.</p> 

</div> 

<div id-^sidebar 1 ^ 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusee 
consequat arcu in mauris,</p> 

</div> 

<div id= ,J footer ri > 

<p>Copyrigiit Scopy; SampleRate and RPM Music, all rights reserved*</p> 

</d iv> 

</div> 

</body> 

</html> 




加入诱衫鸟祥式 
的，各侶或符您在 
网页¥成入更多极 
左掌 。 


0 




indeK.html 


pun 

1 Qm 


自己动手做 


打字打累了吗？上网吧1 


如果不想亲手输人上述内容，各位可至 Head First 
Labs 网站下栽整个 SampleRate 文件^或许也荷人想 
谁知逬你会在过程中学到什么呢？ 
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用 kuler 找出十六进制值 


使用 OSS 刹建基本 R 页布爲 


body 


Iconterxt { 


margin: 0; 
padding: 0; 

font-family ： Verdana, sans-serif ； 

} 

hi i 

margin ： 0 0 5px 0; 


floats right; 
margin: lOpx 0 0 0; 
padding: 0 20px 0 20px; 
wldrh ： 540px ； 

) 

Ssidebar ( 

float ； left; 



screen.css 




margin ： 0 0 20px 0; 
line-height: 1.4em; 


} 

#header { 

margin: 0; 

padding: 20px 0 lOpx 


} 

#footer 


margin: 20px 0 0 0; 
padding: 0 20px 0 20px 
width: 180px; 

{ - 

clear: both; 
texc-align: center 


#header #logo { 

margin: 0 auto; 
width: 800px; 


Snav { 


background ： #ccc; 


} 

#nav ul 


资的 CSS 将威為砗 

局的框穿 & 稍后•我巧] 
坍 加入更 多诱钐島匆十 
來让 S 咖右正感受嶔们 


} 

# footer p { 

) 


margin: 0 auto; 
width; SOOpx ； 
list^style-type: none; 

} 

#nav ul li { 

display ： inline; 


— 


下-則 内容块必須加 f d ⑽搞 

性来 让它们 iE 确地出现存前面 
的 <div>_ 7 o 


转 nav ul li a { 

text-decoration: none; 


ffnav ul li a,active ( 


If wrap t 


margin ： 0 auto; 
widths SOOpx ； 


用 晴 OAtaofilSj^ 

叛® 倍子列 g 器的中决 


} 

t( masthead { 

margin: 20px 20px 0 20px; 


{责记 ft 这善欢的分後表■也 


4 我们 努力的0杉 4 
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好的，我在达个小色轮上®出3色 
彩。现在泫如钶拕色彩转交为 CSS ? 
我黹 装邡些 玎笑的 hex 值（十六进制 
色彩值），对不对？ 


Q 


0 


运用色彩设计 





矣 tiiet 使子斑该 H 冻 
£ Kulet 金 S 3 含我们选释 
的纪疤 方索句劫设整苒 


我们需要数字版的色轮。 


CSS 需 要所冇色彩的 hex 值，除了 M •基本的色彩。 hex 值 
共6个字符长,例如#572266。 一 个十六进制值告诉浏 
览器该呈现多少红色、绿色与蓝色 5 所以我们需要一个 
方式来转换色轮上的色彩为十六进制值。 


幸好，有个#常适合这项工作的程序 t Kuler (可罕 


kuknadobe . com 下载）。 Kuler 不( X 冇数字版的色轮 
与 hex 浪的转换工具，它还 i _ t 我 们齑看 其他人的调色 
板，甚至还能导出&己的调色板^ 




艿们热 悉的逄 轮。 


俜/ 琪在韌到 

huler # adobe t com 

加栽 Ku)er 0 本章 

暌 r 弗的梆尹，它 

会—直 出取。 
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靠近 kuler 



癟帘 Ysiilov 


戟们 g 在的运轮 i ： 挑洼签 
龟、 轉后鉍不同紀笆汸 f 逑2 
课毯极。 


^ det (⑽ 9 S 扣稍 红地调 f 毯 
衫，也 W 多种格式 $ 斤送中的迗杉 





的急 H 

Kd 供 s 承 g 彩的也 f 孑运 
扣 — 你和度、切度 (hue-^satu^Atlon^value 

HSV ) . H-m-^(t (red 一 $teen 一 &iue t 
R W 、 (cyan- 
^§ehta^etto^6Ui ； b t CMYK) & 你甚至 

CAB ffi & 


Kuler 的有些功能需要 Adobe 


ID 


o 


往意！ 


为了使用 Kuler 上的高级功能（特 
别是交流部分），将需要 Adobe ID 。 
别担心，注册很問单、快速而 JL 兔 
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运用色彩设计 



匁瓱 


使用 Kuler 挑选你在前一个练习中选出的基色，并根据三色方案建立数字调色板。有 
了调色板后，把 hex 值加入你的 SampleRateCSS 文件并查看它们的互动状况，使用 
你的色彩作为 SampleRate 网站上各个 < div > 的背景色。 

< d ^> 的袅蛋比三毯方 f 菝供的 f 
多。试赛送出更多比2毯浅一点咸 
深 _点的琶衫来填入 Simple = 



ROO 


SampleRate, ^ 


> 









^1 SampleRate 

H*mc Ardiilvfi About Contact 



LorcTn ipvjm <}olQr fit 
amct, an&cctetu«r 

adipad^ C ! 也 FusCfc 
C5n#cquat flftu in 
Crss r«c 

nulld. F^luunuKfQct 
m^tirisv rntc^cr lOrCm 
dolor, volutpat eyd 

LjlCn 由 Pi#rKjytnt 

At 4 nicf. Curabinjr 
ul|rlc«£ fit 
#moE fclii. 


Heading One 


Lor«m d&ior 货 arr^d «on«ectetu<r JdipisciJ>g di!. fvtcA 

AnDM vn rTiAurbt, Cf At rtCC Hull'd H PKASei-XA OlAuril, 
Integer (orem d^lor, volutpAt egtt, iddhio e^el, h«ndr^rrt it, n?jJ. 
Curabrtuf uftficei tjs^m am«E fcl<3. &cd mnSuicudm, pi^tvinap 
at, et, i^&Ortil vitAH t uttini- O^n C*ruLC>ui 

Ct magris Cf4 parturiem morilti, na$C«tUf fidlcu『us mirt. 


Heading Two 



La rent ipkfum< domett- s^t amet, co^Mctctucr «i[t, Fu«c 

DDnwquat anoji in m«un$. 0^5 nec nulldi PhgsclEu^ cg«t ntflyns, 
lnt» 0 «r tonem <$olor p volutJHt eget, la&nLg cg«t, hondrerit nvt\. 

Curabltur 1 ylFKes *OSvrri k am«t ft] 鴒 ， $44 mttvS auem, puMnir 
licuEts «t« ktbcftls VKtae, h&ctus. Curn «dcI 4 rmtoqun p«n«tlbus 
«t magnes dcs partur^nl months,, rtau^tur rdtculus mus. 

Copyrig-N G 2D0B V SompteRate and RPM Hwe, at3 right* rtt^rvwT 

_ 

*tE ' ^ ^ " *" r j *t _ " 者 *"' ； I >' ^ 一 ~■' r "■ - ,i_ * u ** e * ■ ■ i "* « — - — — * **?. *i ■* i *i ■ ’ ■_”.•■. ■■. — ■ * * ■ ,* f r -rsiii. i.. i • ■ 1 ~~■'. _ . ■ ■ ■ • ■ |c 

nipiWiPWiiwwppiwpwNPwwi—wwiBliiiniwiiwwj—wiii ]ii ^ ■ 1 广 



采用 C ' ie&tiife Commons 

M 权的 http ； / /^ ki , 

iicefci , com/UchhAnt^ 

{http : / /Uickt . co > n / 

iichhants / 368538048 ), 


人 S 祧色浼殘 

f ^ c 炫桃送的笆衫砖许今 



困着仓色®®的 

把4，存 KhIct 中 

表孑你的基爸 3 
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使用 kuler 挑选的三色 


0^ 

9 遜解苓 


你的任务是在色轮上挑选某个色彩，并为 SampleRate 所用的 CSS 填入 色彩。 你的成 
果如何？以下是我们挑选的 色彩： 



# 572266 #S9^4f #427236 (Base) #945737 ^ad6c49 



t - ' 

个谀讫板 i 的备个笆衫扣出现在下® P 疤轮 t 二 ^ 

使这袅三笆 方索，仍然刁 鈦僅用 S 付 运衫- ©的典中 

琢种只甚三疤 + 的浅运蔽。 


我獅“蕃本”録色 



body 


} 


成碎网页的背 f 毯 


margin: 0; 
padding: 0; 
font-family: 

background: 



Verdana, 

#427236; 


sans-serif. 


#header { 


margin; 0; 

padding: 20px 0 lOpx 0; 

background: #ad6c49; 



決 # 逄用子丙共， 


#nav 


background: #59ad41; 



亮绿运用子与权 


#wrap { 

margin: 0 auto; 
width: SOOpx; 
background ： #fff; 



讀;■主音 6 毯®®困沒我们的募爸 
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运用色彩设计 





答 :好问题。我们就是找不 
到使用蓝色的好地方 s 茧然它可 
能适合当成文字链接的色彩，虽 
然釔色方案找出三种色夯，但使 


的？ 

^ :选择配色方 案时、 

Kuler 给了很多选择、包楛已选 
中色彩的深浅版本。这痊额外色 


SampleRate 完全不一样！ 

^ ： 很好！你的网站应该能反 
映出你的选择及客户的品味， 


用时不一定要仅限于此。比起彩也很适合搭色方案，这 


色轮或最佳实践 ，相 信你对色彩就是浅绿色的由来 
的直觉毕免.你才是设计师！ 






我们设定笆®肉 
容的 < 6 > 背 
爹巧爸送， m 网 

泛容易阌访。 


我们的蓝色去哪里了? 


疴逸间饱 


: 浅绿色从哪里冒出来 


Lorem fps^m dolor sit 
amct + corvsectetuer 
adfpisdng elit Fusee 
cons«quat Jircu in 
rrtduhs, €ras nec 
nutlo* PhaselEus cg€t 
m^uris. Integer tonem 
do tor* volutpat eget f 

ladni^ eget, hendrerit 

at f nisi, Cur^bitur 
ultrices Ipsum sit 
amet feJis. 


Heading One 


Lorem ipsum dolor s^t a met cwsectettier adrpisdng jeltt. Fusee 
con^equat ^rcu in maurifr. nee rtuEla. Phase lbs eget mairris. 
Integer torem dolor t volutpat eget f tfidnia eget f hendraiit nbl 
Cur^bitur wltrioes ip^jm sit a met fells- Sed metys qu«m, pulvinar 
laoulls Fobortis vitae^ kictus. Gum sod^s natoque penatibus 
el magnk db parturient montes^ na&c^tur rkliculus mus. 


Heading Two 


Lorem ipsum dotor sit amet, ccmscctetoer odiplsong ctjt. Fu$ce 
consequat arcu in mauris. Cras nec nulla. PhaselJus eget mauhs. 
Integer Jorem dolor, votutpat eget, ladnia eget, h^rtdrerit at, nisi. 


S ^ mpEeRfl ^ ^ ^5° 仍有仓运货 
景。设急扳完威后，巧们芍以啟 
^ lo^o ¥ it 达 S & 舍资決 s 


我不知道，达个 B 蛣轼是 it 人 
党得 •"… 沉重 m 有压垃感。你 
们玎以修正这个问逋鸪？ 


»no 




> «二 1 SampleRate 




Archive Music 


Contact 




■ ■ ■ ■ ■ 
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色彩饱和度 


況重的反义词是 .. 峨亮 

Sam 觉得 SampleRate 石起来很沉重 a 这个评语并不让人惊讶……记得吗?色彩 
会 I 上人感受到比起儿:他 M 对元尜更多的东®。我们该怎么处现•个让人觉得沉 _rc 
的网站呢？答案是 U : 这个网站变得明亮一点。 


三色方案（或任何其他方案）的好处在于，只要我们大致留在色彩在色轮上的位 
I 我们可以改变它的饱和度。饱和度 (saiuration) 只是形容色彩深浅的设计术 
iS, 所以我们可 以调淡 t 调亮配色的饱和度——它仍然是相同的色彩，但给人较 
为明亮的感觉。 




@个网站给人的慈觉 右的因为适衫 


妁3蝥沭逄板’起菇 (!i 中典 • g 
急彩构需命笆給的外®威中-杉起深。 

■羞 m H 
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运用色彩设计 



\ 这个戊运扳丄，的荔个笆钐部4下®的迗轮 f 描泠出來了 e 印使这1 

V 三笆 方素， sig 戧有 s 神 爸衫. ©# 萁中芬 神甚较 浅毽的诞本。 


你$以4笆轮虿移功 
命疤® ®。 ©於选揮 
3 tr Ttur 蚬則. 不用扣 




Select a Rule 


Triad 


汶记哉们仍在值用三 
( Tiiad ) 色方 


I 磨笔上阵 



调整 SampleRate 网站色彩的饱和度并改变你的 CSS 文阼所 
用的攛,可从下列色彩着手 u 新色彩如何改变网站的感觉?1 



社 363 仙 6 # 59aJ4f #427236 (B ㈣ ） 称 945737 ^aJ6^49 
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四色方案 







tiiiiMSampEeKate 




使用 ® 


色方案创 建更丰 富的调 


Lo^flm ^psufri dolor sJt 

•dicing * 扶 . Fvk« 
£[>nsB4iidl drtu irl 
miL^nju Oil n« 
riJl*. PtuHAaegvC 
nuurb. Integer torcm 
dahH^ 

iKirv« mt. tw 
4t P 

IpfMffl tit 
*nr»At f*1iL 


i 似 wndredt 

OjnbjCur 


Heading Two 


Lfircrn i^iajfrt sa dm«E ； Pus££ 

c&n« 4 uat arou m irui^, Cns oec mj^a.. ^tu=seliu£ maurb. 


[nCe^Qf wem oovr^ wiutp«t egel, lacind eg«t» hetn3f*ht at, nsi, 
CMbftur ultnces ipfum sit a met ftltf. S*d m«tui qm nv puMnir 
it, licuf« ct, loterti^ vitu. lmuv F Cum sscihs natoque pcnatkbiA 
tt Ai40^ CSH Mrturt4nt rt^*ritet, f4$0elur rid itvlirt m\j% r 


Heading 

LCK«m \fnum <SoMy 


One 


dokK sit ernet, ido^cK^ «lit. Fuuc 

artu Jn fruurls_ Craf n«; nu]la. Pha 味 "体 ipqct ： nui^irK. 
tnfte^ef \anm aoiar M ydnu c 沐匕 h*«fr*rt At, 咖 _ 

0^i r 4bitnr 此 《， ipsuni vt fcW, S«d metw 4^4 m # p^ylrmr 

L*<uS4«i, iot>ortt« v^ f lectid- Owti fod 攻 rs* 访和 《 pent 油 uf 
*t rrugn^ db pirturiflrtt mofitw, ntscctur rkfioibf fntfl- 


急板 


3 大家觉得•网站申.调时，或许表示色彩太淡了… ■ -但我们已 
经知逬 Sam 不傳欢 SimpleRaie 采用较深的三色方案。既然 
不能调深颜色，不如考虑加点色 彩吧！ 换句话说，从三色组 
合变成四色组合。 

最常 用的四 色组合是四色方案 （ cetradic color scheme ) fl 
四色方案有时称 为双互补方案 (double complementary 
scheme ) ,它是蚰丰富的 配色 方案，会用到两对互补色 

但谪小心。处理四种不同色彩耍花不少心思，而 iL 它们使用 
在网站上的份蛩不能均等， 汾 则网站卷起来会令人眼花瞭 
乱。 但为了给网站增加一些复杂度与活力，第四种色彩确实 
带来不冋的效果。 


ra 毯汸索甚苌的 S 补运， 葑神饺 邻迫运衫的 
约的20度。 、 
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运甩色彩设计 



为 SampleRate 创建新调色板，采用较为复杂的配色方案，例如四色方案（两对互补 
色 ） 请用 Kuler 找出你所选择色彩的[^父值。 



^ logo 中选择一个祥本色作为调色板的基色（随便选择任何你喜欢的色 
m , 没有关系）。 


■■ 


^VJ 1 ! 

^h. mb 

■■ 疆 _■■■■■ 
■■■■___ ■■麵 


SampleRate 




在 Kuler 中设定基色并调整控制项，直到你调整出想要的调色板（记得=~^ 



在中挑洼®笆方索时， 

董_)以下 设金， m 现 4 的色轮上 

充个您孚苟供汉蝥。 


Select a Rule 


Compound 


S0K 


选取 11 Rule 51 菜单中的 a Compound H 选项）， 
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利用 kuler 的 compound scheme 



3 娌蘚答 


我们使用四色方案，基色为 SampleRate 的 logo 上的深绿色。 Kuler 能提供 
四色方案所需的四种色彩，我们还会 得到一 个较浅的绿样本色，以方便进行 
更多变化。 


# 427236 




井 7 a 607 F 



# 947^5 


f ?) : 只有三色方案与四色方案两 
种选择吗？ 

^ t 当然不是，有很多方案，大 
部分是较肩单的配也 方案： 单色方 
案、类比方案、五朴方案以及分裂朴 
色方案。所有方案都連循相同通用规 
則 I 洌如三色方案与四色方案，它们 
发现互为某些角度的色彩很适合一起 
运用，想进一步了解这些方案，请参 
考： http : 〃 www.color-whecl-pro+com/ 
color-schemes,htmU 


/ V 有蠢舰 

1^1:真的需要用到配色方案才能 
创建良好的调色板吗？似乎在色轮 
上挑几种色彩就可以，却变成要做 
很多工作的感觉9 

当然.各位当然可以从色轮上 
随机选出一些色彩作为调色板^不 
过，大多数时候，至少都会选到两种 
无法协调的色彩6 Ifc 色方案依据衧之 
有年的色彩理论,专门设计来协助你 
创建和谐的色彩组合。 


:如果我想要的色彩比色轮上 
的色彩更淡，该怎么办呢？ 

越接近色轮的中央，色命可能 
越来越深或越來越浅（例如 Kuler ). 
如果你想要较浅的色彩，可以把表示 
基色的困圏拖向中央4或者，调整校 
深色影的饱和度或不透明度 4 直到调 
出理想中的浅色& 
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我们选好 | 彩，不是应漆有一些可供遵中的規 
則來褅保在网员上庄 确珀运用它 们鸪？ 


关于色彩的安排，并没有金闪闪的最佳规则 


K 的没有一组可适用于所有网站的规刖 e 在某个网站结 
构上符起來很棒的配色，换到另一种网页布局与设计上 
可能卷起来很糟糕。再说，你还要搭配网站主题与视觉 


隐喻。 


但攰，冇些可以运用的原则 ; 


如果你想区分布局上的不同区域（例如区分主栏与侧栏）.陡 
使用对比 ( contrasling ) 的色彩。对比可为两个区域逑:/:边界， 
il : 我们知逍两个 R 域苻所不同，大既在整体网站 中典布 不冋功 


能或用途。 


adipiscinq elit_ Fusee 

I wP 

consequat arcu in 
mauris. Cras nec 


発烈的笆杉的比。 ii 伎得网 
贡的为容 S 铖潢泡祕鸟整休 



重点强调 

如果想强调布局 h 的菜个区域，则使用调色板上最突出的色彩 P 
如果使用调色板上的主色 (dominant color ) 围起 ffi 要内容区域 
(阏如页头或 网沉标 题），则该 E : 域会被强调, 


碲考 iif 值用的 ㈣ 比丞島主 
兔 ■ Home 分荀岛黑色货著 

的的 tfc 很钱 H 戌也认 “常 
抢琅的栋色猗彔中终凋亨这 
个分兵。 
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完成范例 


it 我们 E 新 SawpIeRate 的 OSS 

这里是 SampleRate N 站的完整 CSS 0 我们把设计时使用的色彩留下空格（在 
下例中以灰色方块表示）。莳让你的 XHTML 链接到这份 CSS , 井爪复检査布 
局。我们将于接下来的几页加入色彩6 


body 


margin ： 0; 
padding: 0; 

font-family: Verdana, sans-serif; 
color; #333; 
background: 


#nav 


■ V S 1 T ■ 


} 

hi 


margin: 0 0 5px 0 


P 


margin: 0 0 
line—height: 


20px 0; 
1 Aem : 


#header 


margin: 0; 

padding: 20px 0 IOpjc 0 
background ： . 


^header #logo { 

margin; 0 auto; 
width: 800px; 


#nav 


background: 




#nav ul { 

margin: 0 auto; 

padding; 20px 10px 20px lOpx 

width: SOOpx; 

1 ist-style-*type: none; 

} 

#nav ul Xi { 

display: inline; 


padding: lOpx 20px 20px 20px 
text™decoration ： none; 
color: #fff; 
font-weight: bold; 


所布空格布需罢域入笆彩 ■ 
我们将子孩下来的几页加入毯彩 


4 


#nav ul li a,active t 

background: #eee; 
color; #333; 

} 

拎 wrap { 

margin: 0 auto; 
width: 800px; 
background ： #eee; 
border-left: lOpx solid 
border-right: lOpx solid ^ 

} * 
#masthead { 

margin: 20px 20px 0 20px; 
border: 10px solid #ddd; 

^content { 

float: right; 
margin: XOpx 0 0 0; 
padding ； 0 20px 0 20px; 
width: 5 召 Opx; 

} 

Ssidebar { 

float: left; 
margin: 20px 0 0 0; 
padding: 0 20px 0 20px; 
width ： 180px ； 


#footer { 

margin; 20px 20px 0 20px ； 

padding: 10px 20px lOpx 20px; 

clear: both; 

background: 

text-align: center; 

color: 




A 生用困加 
上这 梠， 笱多祛供— 


} 

} 

#nav ul li a { 

#footer p f 


margin: lOpx 0 0 0; 
font-size: small; 
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9趙 


在下列空格中写下你觉得最适合该区域的色彩的 hex 值 a 想想对比原则 
以及突显内容的最佳方式^我们很快就会在实际设计中用到这些色彩。 
请记住，留白是你的好朋友！使用代表白色。 



Home 


LOf 帥 ipsunfl tforoc &it 

a met, consjecletufir 
adEpl^on^ elit. Fusee 
eariE^^uAt arou in 
m^uris, ciec 
nulta. Phase I [us eget 
maurfs. Integer lorem 
dakar, volutpaE 叫此 

l^cinta egetn hentfrorit 
扎 nasin Curabitur 
Lflerices ipsum sit 
a met fells. 


Heading One 


Ldfem Ipfuin dolof sit a met , conscctetuef ^dipLsdng eliL fusee 
□on^quat ^ircu in mauris. Cr^s ficc n\j\i& r Ph«s«tlus eget mauris. 
In^e^r lof^nri dofor, volutpat egeb ladnla eget, hendrerit at # nisi, 
Curabltur urtrfccs ipsum sit amet relis. Scd metus quarry piaMf«f 
IscuIes eti lobort^ vitae, Cum $odls rtAloque penalibus 

et rmasnLs dls p^rtonent monies, nascctur rkficulus muS. 


Heading Two 


Lorem ip^gm tfak3r srt a met, oons&ctchj^r adrplsdng «trt. Fusw 
ton^ectuat artu in imisurts. CrA& nee nulLa. Phastilus eget; mauriSi 
lortni dolor, voliAt>at ladihlA heodftnt at, nisi. 


動 iwir nw 



As 


杏伢的 《I 笆扳中，为苫个 < rfb > 送择运钐 
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为范例加上色彩 



以下是我们做出来的布局。你喜欢哪些部分？不喜欢的又有哪些部分呢? 


蓐芩 


Hfffff 


㈣ U ⑶的“ 


联 m 刪“ 



#447236 



糖遞 I 


COfltBCt 


W ： 


.〆 I r + 


、 >rp' 




t fc , • l_ 


k i 




Lorern lp<um d«dr t 
»m«tr wuMetuer 
Adipescirm eR. fust^ 
OMts^uAt ami in 
Gras fttc 

mMa. PhueHus cget 


mAuriL integef urcm 
6Qk»t f vokjtpot egc^ 


ladru 
at^ nisi 


h«odrcnt 


► ipsum sA 
£ll£. 


Heading One 

t^nem Ipwm dokw 5^ oonx^ctucf etfipcsdn^ cBl Fusoe 

£xms«)ujt anu in msuri^ Cras nee raula^ PhayBirs cyct mauris. 
Integer lorcm dolor, mkJtpat ladnia ni^ 

CMMur vfertoe* ipfufti amt Sed nietuf qu*m f ptMn«r 
dlf idOj&s ctf labdrtk vitAB, tec^is. Gum saaa natAquo patnotOxis 
et magnls dis p^rtuheftt mantes nASUtur fldioilus mus. 


Heading Two 


Loiem 


oonsegua 
Integer k 


ipsum dolor tl£ 麝 conateittu& ^i^tsdnq Fusofr 

ual arcu 


kmm 


In maurls. Cras nec nulla. PtuseikA eget mauris, 
vo4Apat «ge4 Itdnla hendrert 机脚 . 


^9!d8ac 广 ~> ^333333 

有时候 ■ 浼灰 Sii 合用 
子丈宇这域， 石不差用 


_ leases 

.... . . 
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这样邊起采不错。 ft 




v v i 


些品 味调金 


我做 




3 




logo 


禮拟化 


我想 


U 




太 


个 S Web 2.0 


M 冰 


的©窠 


出 


通整 R 姑來紀合新 logo 


对吻7 




/ 

M SampleRate 



:习瘅 


logo 完全翻新了！你的任务是更新调色板，使用新的色彩，并在 SampteRate 的 CSS 文 
件里修改^^父值。 


0 从新 logo 里选择基色（这次的选择少了很多）。 


I * I »« ■■钃 ■■醪 ■ w m 

rc 


g 下馨龟的 h<!x 代孩 
(’糾用 。 



使用 Kuler 开发一个适合 SampleRate 网站新需求（及该网站内容) 
的调色板。写下你所选择色彩的 hex 代码。 



吏新你的 CSS 文件以反映采用的新调色板。谞尽 i 問 整到满怠为 
止！ 
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荇起来真棒 



Larfim Jpsum dobr 
4fTl«t OOflKCtfitJL4f 
adJpLidrio cht. Fltscg 
corutf^ust sroj In 
mfligrit. Cm nec 
nuiiA. Phh&ullut 
maurts. Irue^tr lorti-n 
dolor # volume C cgct, 
lad^ita hendrtrtt 

fiitlh Curab^tur 
ulv^tiphim tit 
ftm*E feiit. 


Heading One 


Lorem ip^uni dolor sJt arret, conscctetuer cdiistscir^ eirt, Fu^cc 
con»quat arcu iii mfluris. Cras n*e stilus cg«t mauris, 

Iflrcm dalar^ votutpit tgct, l&dn^a tigc^ h^ndncrit at, nis^ 
CurabJtur uJtncei 彳 p^jm fit amt^ felts，Scd mctus quam. pu^virtar 

at, iaojUj el, Vito*, iectus. Cum Eoois naioqiifi pcnetibus 

ftt dig p^rtufieni moneys, nesoctur lid^culus mus. 


Heading Two 


Lorem \p^um dolor sit amel, con££Ct&tuer adipbcirtg dtr Fusee 
cOfiKQuat arcu in mauris」Cras nec nulla. PKQKltyS eget m^uris, 
trlMflief k>rtrn dc*0『, wolutpdl Q^et, lionia eg«t^ h«ndr«rit rtW- 


1 \ jiLaaaBQ 

■ ■ "’i — ■* … ,|- ®^' ^ 






# 9 f 2824 


# 560000 


9rules 


後赛柢你戗过的—喳 




#mm 


# QZ 9 eQ 4 


这个两站砻起采真# 


前卫 m 


9 ru[es 


非常祓& 


我敢打赌 




香攻达令作品 






人的该 


球 . 傲得好 


SampleRate 


Home 
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你的 Web 设计工異箱 


色彩、四色方案、三色方案、分裂补色方案 


你学到了许多新名词.也学会如何处理它们。回 
头査看自己制作的其他网站并更新它们的配色吧。 


复习要点 - 

_色彩对网站的访问者具有强大影响， 

■ 使用色轮来选择网站设计时的色彩。 

■ 配色方案是协助选择和谐调色板的工具， 

■ 三色方案有三种在色轮上距离均等的色彩„ 

■ 三色方案很受欢迎，因为它提供强烈的视觉 
对比，同时维持色彩的平衡、丰富与 和谐。 

■ 三色方案的对比不如某些配色方案强烈。 


_四色方案有四种色彩，形成两对互补色， 

■ 四色方案是最丰富的配色方案。 

»四色方案的缺点是有时难以取得色彩间的和 
谐。 

■ 使用类似 Kuler 的工具来创建调色板（并取 
得调色板上各个色彩的 hex 值>。 


目前位置 ► 


191 












□ □□□□□□□□□□ http://www.pin5i.com/ 


6 


黎慧导航 

“在两秒内，按下‘首页 



没有导航，网站会变成什么？导航系统使网站成为强大的信息媒体^但有个 
问题：沣航远 不仅仅跬制怍出一些外表酷炫的桉钮，然后把它们用力贴到设计图 
上。智恝导肮系统的建立应该从信息架构开始，并贯穿于整个设计过程中。但导 
航系统如何运作？如何确保用户不会迷路？本章中，我们将探讨不同导航风格， 
了解 IA 如何引导网页链接，以及为何图标（本身）不仅仅是图标。 


进入新章节 193 






识别导航系统的问题 

f 校即 将孖学 

Mackiimc 州立大学的新媒体学院 (Collegeof New Media , C _ 
遇到了一点问题,他们刚花了大把钞累请网站设计公司重新制作 
r 网站 。新网 站非常好肴……伹大家都不知道该怎样找到想要的 
内容！教授无法找到卩 IlL 的论文与文忾，助教祎至搞不馈 n 己要 
教什么课，而新生现在就要上网选下学期的课了! 

新媒沐学院沿耍你出马解决这场导肮梦隨，而且速度要快 4 否则， 
他们将失去今生与教职人 M ! 




SI 鸟颂敁洚没 


it 哒狍 



4 ■堯 Q ❻ _ 一 


aim 


...’w 


“N*«p M * 似 I W^mtvr 

J - f J I I, |-. .,, 二 ■_■ . -| , 一一 . 


iquiCii 旧 Fflw Mi m 

HiurNR'^rt imimv 


t •/ W 4 K 3*4 4 T 


IWtJl 


Conti 

Tph Co\k 


MifhAK Stattf Urwari4y 
Ufl UOfV\ Avft 
E*U AHywh«rfl H Ml J?M64 


Mew Media 

Th4 C& 4 ^D d N»w M 松 m Mv^AC S_ UnivtirliTy OH 
LWdiKJ¥，nlry COvrH^PfEucry f> IN EeCTi^>94^, WlUJFy. 

ara theory flf n^ffnAKon 1>i* Kirrtcu^m flUbtil fitvtionfl ^0 iH^Kl^lEC lh« 
c/cit^4 ar»d &p$i»d f^ouiut \a thu jfflkol Uuc/ ft pr*pirH 

to & «t«chr4^gicM!>v ^aoah*. nlr^tr*. iftd crvi;rvt media 

W 4 i»oaa:_ 

Why C_? 

Todty r hvymitcn it fuid F conbouaji And iruUTtV ac»uio , 4. Tfvi 

h AA CAuMi li^tft n irva wl^Ch wA d.ltfl. liOMU. uu. 

ifllormnion. Th* M 分 W# Ol ftfw Mj4U. 

Wi ^^'•ttuKki htlrv^ndnil^ Ui« 



—— . ,,..— , ——-- 

^ t _ ； _ _ _ - 」 „. ______ ，- X 

这基納 i ?- 休奪晚的 
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9捶 


仔细观察 CNM 现有网站的屏幕截图 p 首先，圈出所有不同的导航区域 。 然后，在下 
面的空白行上写下你找岀的任何问题。 尽堡 详细，还有，记得学生与教职人员都要使 
用这个网站。 






Contact CNM 


Tf» CMogtof Modit 
StAUk UnivAffidy 
■簋 1234 Up Norm Aw 
， EAti Artywtwra, M4 


New Madia 

Tho of Naw Mo^la at Mochkttc SUilo Unlv«rs4y offen &n 

rrt 酎 dts^rtory OOofWOt study in thd t«ohriotogl 0 », hksaory. 

mvi thooryOT kntormation. Thfl curhCukim dudO^ts to ttw 

fftatrva &nd applM pfooeuae ba this area of ftuoy.li pfepai 杉 

stodontj la be icehrtokjgfeflily thlnkvr«. «nd crMtiva n^odla 

pfolftSbcnal« r 

Why CNM? 

Today, hnfotmAtian la blooming Aukl, oonlinuouh ind mslanUy ftocosAbto. TNa 
ruis oiu««o» in im wtiidi w« 扣 c«» N u««. urrtflf*UfKJ 

dalrttHilo intornritiofl* Ttw admit And coovargvnc^ of otw i^ 0 U r 
ledvboiogds, and mformttion svst4ms nu rtundw m rtssiionsJ^p of me 


' 






r _^ ^ _； 


CojltyOfNtw Mpdit 1 WteklflK suit iHtfwrUty 士 * 


cnm 


COLLEGE Of NtW MEDIA 
mC^HACSlAIE yNIVERSmf 




: i} 應 


别忘记叙达伪我出的闷 M , 

4/ 
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良好的导航从良好的 IA 开始 





of Pfaw UffM USU 


WKCO™ to 


<TTi«Co3o9« 

am 

TTrt C&MiqaoI fUm U*tU 
UaChnoC SVI? Urv^K^y 
l?>i RJ^lMDiTiAkV 
£ad Am^ftfr*e, Ul ^aSM 


New Media 

the CcAe^e or k 


St 1AKWK Sc& L^wsffy affpri 


C^Wy DDurU OT n Tm tpTSorns. ledlnalo^e^ h^jry. dnagn, 

Ard ttfOry r^yYTUfiO^ Th* £unneulm ena^Axi AOvtti lg rp^fA^u 巾 o 

cr^uvv «ng mM procnM vwrtHf 畤 tw* m« a A4y h pretwn 

a« uwwytogKMmf ch^moa^. m^cu*^ tw*eri. v4 otmumj rr^a 


Why CNM? 

lod»y, n^D^msScn n tseeonv»g 
1^ a 4ivn #1WA 

and dsnEUfti rrlvmdhon 

and r^arrunon 


and dsmtLRB 
KKfno^ca^ ■ 


The 


3 Tua. o 
»»ffeeri 


C1£lArffy aCcnaf^e. Tha 
we tT^Oo, a^aelA-, use, mdcr^anJ 
area ajnvwflencff of ne* 
e^mJec] tva 


cifne*a^». 

rejafiomr^ of 


I_ ■fcrtri *rt* .lihriijl ti rthM'ihi Tha i—-awrl 

i .■:■、」 ..'.-i ■ ■ ，二、 /V::〜v . ■ - — , ，a 

l^r- ― - ， IWWW——— 


. r ,_* ^cr- - 


超链接的标越让用户对❺ 达些 ©标 做手代表不同 

•l i l4il4!nfia4*'ai'4tt-litia'iifiHtf|p|il'4l > •■*■#■#;■*■* ■'*■• A l r hi- ： hil ir fell!AMHri!BBaii _>■■:&. 丨 ■■•■.•■■•■■■■■.■■■i ■■琴参 spa p. ^ ■. ^ ^ ^ ，争，琴 ，■. VP-4V>HhS->PI-44-BR'-l + l'fl°4l-ffa'' 

子 ，鍵接 .办容.感.到.疑.惑 .。_… ..稷.序 .a_.. 廉.|6,宏戈.们,代..秦, 

齡奄义 A 

警 ■!¥■!! •■ 警■¥_«■，■#!!■■■■■警 _ + R R 9 ■■警 i^fiS •■ 寺 ■«■ + ■ ■ + 9i ■ V^i Wm m J fi ■ QL ■■■■■ ：H A ■■■•■■«■.«■■■■■■■■■« b «■ a ■ a »■■■■■« ■. 

煮起采设计者 跳过？ 导 ® 这部分就是 B 页标题码？会 

h4B*fl>fifrhi>lia-l#<l#Bi!lilil!l(B ba'hil-l»Bri'HtfeH*B!*l ba'hd'ii'fai kri-h*Hilii!l!l-ki ■■•_■__•_ n __«琴 

航 iSi +..。 霜.農加 .上二 ，些. ，直更 H 航信.悤.出..规.在.这里 

携.式..…”鴻7.…我装,在篇石邊楚二 •= 


大部分的问通郗鸟箝菘的链揸名称布兵 t 
对吒？不能疽接妗正达巷名称吆？ 


你的任务是找出 CNM 网站上的潜在导航问题。你找出了哪些问题? 


9 瘅拜答 

■ 


萑个鍵号灼吋右到 
下®相同鹐咢的闷 

Sis 95 , 


aoo 
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智慧导航 


良好导航的第一步是良好的丛 


链接名称不仅仅能帮助用户 6 它们实阮上组织起整个网站的分类 P 大多数时候 ， m 
糕的链接想味矜在佶息架构的阶段并未考虑导航的 问题。 

让我们看看 CNM 的 IA 图: 


CNM 的 JA @ 


o 


\ 


Programs 


Web 

Design 




Camp 

Animation 




Game 

Design 


Digital 

Writing 


CNM 


New 

Media 


Sfudehte 

Faculty 


Get in 
Touch 


New 

Media 





About 

■ 二 ■'" 

CNM 

- r * 



Facilities 


J?., V „ _V .* ^-"n. ■ 1 1 

Courses 


血 ■ M 

About 

MSU 




Applying 


Research 




Contact 

CNM 





这昝铛戏 0 前由 ® 
杉 H 


如果霜 j © 亿内 

容铟织与信总亲 

构的知 d am 
©第 3 f 。 



泠颶 


CNM 的 1 A 图似乎组织得还不错……但分类名称很不好。究竟这些名称是什么意思？ 
请根据分类内容，重新想出明确的新名称。确保考虑了用户解读分类名称的 方式： 
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重命名导航链接 



3飇薄答 


你的任务是为 CNM 网站的主导航元素想出新名称。以下是我们的构想: 


这个条0名彷芍以係 
留. ©6 宓頗然表现 ® 

舍的内容 & 


这个分类下的内容似4 
部 ( S 合学洼值用。油 (D 
也代 表5这个叼站的_大 
群用户。 


4 

Programs 


4 


Students 





mss 


这个郝分 H 供軚把 
人男僅用.珉 f 主 
无興 0 


Faculty 


好磕后的名称， 

Ct C^et in Touch " ^ 


About 



名称里到底有什么魔力？ 

我们陚予导肮元素（链接、按钮等）的名称对于网站的可使用性 
具有直接影晌。换句话说，万维网上的名 称非常重要. 你应该慎 
靈思考 IA 图上毎个分类与导航元尜的名称。下面是有助干想出好 
名称的通用 指南； 

o 保持名称简短 ^名称越短越好 6 我们希望用户能尽快扫视 
名称^使用一个词最为理想，如果典的需要，最多使用两 
个间。 避免在名称中使用 “the” 或 “a” ， 它们只会浪费 
空间。 （编 注： 换成中文,或许就是少用“的” > 

O 保持名称具有 描述性 。你选择的名称应该尽可能沾晰、直 

接地 表达苽 点。你不希帑用户瞪蒞链接想破头 5 如果连 
你也不能百分之两百确定名称的意义.用户当然也无法 
确定。 



有窓问极 

有癱酿 


1^1:如果实在无法用一个词作 
为导航元素的名称，怎么办？ 

^ :如果必顼用到多个甸才能彻 
底说明用户按下导航元素后将通往 
的地方，則没有关系。与其有个响 
亮动听的鲁航元素名称，名称应该 
能指向你预期的地方，而不会 H 导 
用户走上无意探索的道路。 
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O 从 Head First labs R 蛣 7 栽 College of Mew 
Media (新媒体学晚）的网蛄文件。 

请到 http :// www . headfirstlabs . com / 嵌找 Web Design 的链接，并点击 
第6摩的范例义卟。 


© 吏新 CNM 的主导航链捿。 


© 


<!DOCTYP£ html PUBLIC ， W/W3C//DTD XHTML 1.0 Strict//EN" 

1l http ： //www-w3,org/TR/xhtmll/DTD/xhtmll ta Strict.dtd 1, > 

<html Kmlns^^httpi/Zv/ww^wB^org/lSSS/xhtml" xml ； lang~ 1l en ,1 lang =,t en ,r > 
<head> 

<title>College of New Media | Mackinac State University</title> 
<meta http-equiv= ,t Content-Type t, content= ,r text/html; charset=utf-8 , V> 
<link rei^^styleaheet 11 hrefs^stylesheets/screen*css 1 ' 
type =l, text/css ,T media=.’screen f ’ /> 

</head> 

< body > 

<div id= n head^r"> 

<img alt=*'cmn logo’ 1 src-"images/cnm _ logo.png" /> 

<p id= ,f nav ff > 

■w 

<a class^^active 11 title=”CNM Home" href= ,f index.html , 1 >Home</a> 

<a href = IT # f , > Students </ a > 

<a titled#" href= ,, # t, >Faculty</a> 

<a title= ,, # t# href- M # fl >About</a> 

</p> 

</div> 

<! — rest of HTML 一 > 

</body> 

</html> 


检查网站，碥保 一 W 煮起來正常无误。 







$用你存 JA 囝想出的分 












无序列表与导航系统 


o 


0 



我 一4 在仔細 铕崧达 苷导航 链揸。它们只昱 < a > 标 
签，对不对？我们不是该 让达巷 链羧相 S 产生关 
联鸪？ 毕兗它 们粹是导弒，对咜？ 


万维网同时兼顾 视觉 ( visual ) 与 
语义 ( semantic ) Q 


我们多半只注怠网站的外观，但万维网还冇另一个耍素： 
语义 Web fl 现在，我们的异航链接看起来还不错，但没有意 
义。实际上，这些链接都是网站导肮列表中的项。 

们需要的足为导航链接列丧加上语义的方式，当然 t 
xhtml 提供了多种列表元尜，我们就从这里开始： 


巧 <^> 添加独括的 JD 印 g 为糾表赋 
子不同样式，鸟其他砑秸用4网玷上 
的刊表有 MS 到 a 


对0窃錡在网贡的涟戏加 f 此 tive 坎 
^ t spg 添加帘助用户和道0前蚵存 



运 个以也 g 到出这 
汾袪 二的列表差 

暮 H 


<li><a classwactive” title= l, Home ,f href= n index.html M >Home</a></li> 
<lixa title= M My Blog" href= 1 l /blog/ l, >Blog</a></li> 

<li><a title= ,f My Portfolio" href^ lt portfolio,htmX">Portfolio</a></li> 
<li><a title- M Contact us* r href= M contact*html ,r >Contact</a></li> 


</ul> 


栘油链戏杉签 放在笛 个列表场今釗建？— 
份链掂对表 a 



亨沒有邋舰 

-〜有蠢酿- 

: 为什么在屏幕所见成果不错时语义也很重要呢？ 

:好问题首先，如果以语义分辨网站的区域，你可以编 
写史多专 ffK 功能史强的 CSS 规則 D 忸还有更重要的理由：语 
义在残障人士使用你的网站时非常重要 & 我们将于第8章深入 
讨论网站可访问蚀 （ accessibility ) ，请先记佐这个理由 • 
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这舭袅紹趄 列表未 如上 
GSS 祥式时的样子$ 



• Home 

• Blop 

• Portfolio 


• Contact 
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智慧导航 




磨笔上陴 


在我们开始更新 CNM 导航系统的外观与感觉前，需要把主 
导航转换为无序列表。请研究 CNM 网站文件的主要 XHTML 
与 CSS ， 并配合无序列表的使用来修改标记与规则。 


<!D0CTYPE html PUBLIC ，， - //W3C//DTD XHTML 1.0 Strict//EN tf 

,r http;//www*w3*org/TR/xhtmll/DTD/xhtmll-strict-dtd 1 ^ 

<html xmlns= ri http://www,w3.org/1999/Khtml 11 xml: lang- ,, en M lang-^en*^ 
<head> 


<title>College of New Media | Mackinac State University</title> 
<meta http-equiv= ir Cont0nt"Type ,r content-^text/html ； charset-utf-8 M /> 
clink rel-^stylesheet" href- M stylesheets/screen.css" 

type-^text/css' 1 media 孟 ” screen” /> 


</head> 

<body> 

<div id-^header 1 ^ 


<img alt^^cmn logo” src='*images/ciim logo*png ir /> 




index.html 


</div> 

<1-- etc* —— > 
</body> 

</html> 


V 在 CNM 网玷的贞癸 g 加入斜的导较 


Snav [ 



故 tlUiZ 沄, 你 t 龙调整 CJSS , 
fi 导妖与辱本的外塊一祥 0 後扣 i 
-些规則_伎專鉍罨起來与杉记磕 




screen.css 
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为无序列表加上样式 



嫌窀上陴 
驊苓 


理解了主要与次级导航后，现在该把新知识运用到工作中 
了， 


<!DOCTYPE html PUBLIC M -//W3C//DTD XHTML 1.0 StrictZ/EN 11 

,, http://www,w3.org/TR/xht ： mll/DTD/xhtmll-strict -dtd ri > 

<html xmlns= l, http ： //wwv^,w3,org/1999/xhtml ,1 xml:Xang= r, en ,i lang= ff1 en IT > 

<tltle>ColIege of New Media I Mackinac State University</title> 
<meta http-equiv=’’Content: 一 Type” content- #, text/html; cha 3 ： set=utf-8 M /> 
<link rel™"stylesheet* 1 href- n stylasheets/screen-css ,r 
type= ir text/css” media= ,, screen ,1 /> 

</head> 

<body> 

<div id= ,, header ir > 

<img alt=’_cmn logo" src-^images/cnm _ logo*png T, /> 

<ul id -^ nav^y 



index.htmE 


<XiXa Ol 龜搴 霈圓 1 ’ 龜 Otiv 癱 " titl ■ 靈 __CKM HoiM ir hrmt 

->_■ ■囑 = p _ __v ■.嗎 w m - w m p m ■_ 響謬 w ■晷響 ■■■■■■-_■*_■■ v » ■ « ■翻 ■>■■■•■* ■暑 ■»_■■■ ■邐 _■■■■■!!■■*» 暑 

hr«jf-^ ,1 >Faeult2</ft></li> 


眷 ■ 鲁 ■ 譽 ■ ■■■#»■ 


</)?!> …… 

</div> 

<J— etc* —> 
</body> 

</html> 


V ■ V 琴響 _ 響 


indue 


html 1 r >Home </ax/li> 

* m ，嚅 #tv_vri m m w m 



钱们把 < p > 杉签磕变巧 # 巧 s 个 
链掂扣入合 ii 的 < u> o 


#nav { 

* h .... H ^ 一 

,vi4U 印脚 … ... 

heighti 75 px; 

i 

#nav li a { 

- .. .. ... 

.float:..l«ft ； . ..... 

pAdding: 20 px 20 px 20 px 0 ; 


哉们犯整个马軚 s 域涔劫到在倒，僅 
它出璁在轲页左 io^o H 


^ < ui > 我 fO 龙求窑个 

布； T ■采奴（妖认的）鉍形式 。 ’ 




screen.css 
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mm 


猜更新你的 indcx . htm ] 与 screen . css , 然后试验新的 CNM 网站。它看起来怎么样？史 
好吗?更糟吗? 一样吗? 



j#no 


Wo*corn* to T!» Ccjhmo oA Now Ht MSU 


New Med a 


_ Contftct CNM 


Iti9 or N 嚤 w M ⑽怡 

MAChinac State Univoxsilv 
1254 UO PWlh AvO 

Ml SW54 


Tho Coiiogo of Mow MoOMi ai Mt 

trttftrdii^pliiYiiry KKjrse of £tu(ty m Iho sy^torns, to^n.iu uy «u TUslwy, d^sjg' 
theory qI iniofmalw. Trio curjiajuim onabioa ttu 加 mi 10 1 ⑽ 

tfdAm imd hpp]M *44*riMkl 10 Itiil *ro« ot H d ⑴的巾 ft 

atydonia ki Ci) ItH^wtosjieaiv c 知 aKuia 吣 ihinK^fs, ftrrd eroatlv® modso 

pfoloss«nnii 

WhyCNM? 

Today, ^i^ormfihCn ps becoming rigid, COntlfKtOiii A^id r^lAhUy ACCA&&45 电 This 
ruii a ihiti 4rt mo Wftys in wo oro«io, accoss, u» H undmlond 

and dutribyto mtormoitoo. Ttw *dVQn( and Mfiv6^DEiC4i ot new Mtilii, 

and hifonm 喊 ion rekmdl«d th« foia^onyiip cf trv 

llaki 



笔上阵 


擎# 


链接还可以放在哪里？至少写出三种关于 CNM 网 
站导航的其他样式或其他位置排列的 构想： 


■P S- ¥ ■ ^ 


A m A, ^ m A 


z 

3 . 
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水平方向的导航 


1吾处理方察：水乎分页导航 


当今许多风格现代、基于标准的设计，都具有水平分页导航系统。这种设计适合一 
栏或两栏的布局（虽然布局越宽，水平导航显得越长）。水平分页导航系统也适合 
作为主导航，因为链接如果放在网页顶端可吸引用户的奖注 。 分页的构想也带来了 
网站不只一个分区的印象——亊实也逛如此。 


鸟稍竿的镕幻和昀 
链戏放在列表中， 


以下是水平分页的 XHTML 与 CSS 代码 s 


<ul id« ,r navigation rT > 

<li><a class= 嘗 , active” title-^Home 11 href= ,t index*html 


广 (一 

,f >Home</a></li> 


<li><a fcitle= f, My Blog" href- 1 , /blog/ M >Blog</a></li> 

<li><a title= T1 My Portfolio 1 ' href^"portfolio.html 1 l >Portfolio</a></li> 
<lixa title= n Contact us” href= rt contact*html ,l >Contact</a></li> 

</ul> 



一个闳单.水平的导舦系统。 


# navigation { 

margin: 0; 
padding: 10px; 
list-style-type: none; 
border-bottom: lpx solid #ccc; 


} 

#navigation li { 
display: 

} 

#navigation Xi a 


ii 场规則把 <“> 杉签从—个块无索歿变妁 
Lne; m (£如)光夂诖<“> ㈣ 刚卜 

不用 金在另-场土。 


text-decoration: none; 


padding: lOpx; 
color ： #777 ； 


#navigation li a - active, #navigation li arhover 1 ^_ active ^ ho^ ^ ti ^ >C 

background: #eee; 超槐有 ^active " 袭或试枒移过链 

border-top: 2px solid #ddd; 戏的的粵紋 5 化想也 

color: #333; ^ 


204 第 6 章 






□ □□□□□□□□□□ http://www.pin5i.com/ 


智慧导航 











— I …― —mi 丨 mnri mmm\f 


这个导舦 f. 全链 4 放在 
在側 _ 主孩(次龙） M 孩 
射兹 4 右倒。 




Bf^ckBook/Chicago 


■ w ■II 

#朵用碘楫式的分资 。 of = =r 


斿采用碘楫式的分页 
热悉, 







y Illustration 



E1IGGTST 
ONE DAY 


tiiutj t b B L\J h. i 3 II 

om DAY PRICES 

… . . ... Of f_ ilLAW 


TOK 


MV 


T''KE ?CO?' 






TRA'/IL 


P 0 FC' s 


.GKT 1 IFE 


WlYOBl 


分菝有 

个榨 n 

对这的 
舦。过 

S 細标 
分的鼠 
孕致的 
水稍也 

用上杉, 
後加 VKS 
S 部分反 
ue 页的 M 
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垂 E 页头 


2 吾处理方寮：垂疽导航 


垂直导肮设计与水平设计一样受欢迎一而且出现在 t 午多两栏式布局中。垂 
直导肮并未优于水平导航设计，只是另一种呈现网站链接的方式。 


但是 t 不能只使用垂苽导航。有些单拦设计与垂直导航合作不佳•但大多 


数设计都能自由选用水平或垂直导 H 
以下是垂直导肮的 XHTML 与 CSS 代码： 

<ul id= ,, navigat.ion ,t > 

<li><a class» M active J, title= ,t Home M 


违;.主秦. XHTML 係掎相 

- ( S )*. 所有祥式島侘 8 

/ 部靠 css 设定。 

href= ,, index*html lf >Home</a></Ii> 


<li><a title= ir My Blog” href= , 1 /blog/ ,r >Blog</a></li> 

<li><a title="My Portfolio’’ href- l, portfolio*html ,t >Portfolio</a></li> 
<li><a title= ft Contact us n href= lf contact*html">Contact</a></li> 

</ul> 



的 I 现方式设定#块 (Hock ), 这祥 g 
建在«常#的块敎样 (wtl-ovez) 垃果 
岛 active^ ^ G 
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这基一个茼谁金式的 

垂£狐铯气 

鉍系统如何巧网站员4的 
(ojo 中取 til S 



topics 


I * 11 .JF 





它几呼&个垂忠魬的分? 5 。粤权 
g 鸟网页惠度 和同. 劣链尨公 
子 active 献各的，舒采将鸟主 <本内 


聂间荦的形式萁 d 子卄 。尚 

恕、馅*的链趄 • 容異我到也 
容劣阅该。 


%% 


痔 S 尚览 

有蠢舰 


:垂直导航适合放在网页的左侧还 
是右侧呢？ 

$ ;许多可用性 ( usability ) 研究屋示， 
垂直导航放在内51的左惻还是右倒似乎没有 
太大羌則，如果饴的布局比较适合采用置于 
左惻的垂直斗航，就放在左侧吧 g 如果 你的 
布局比校达合早航置右，那也很好 a 




HSL 


I，▼■•"■•, ■ 

IV^Vl 響 

fS 


52 

fcKcnvIiig rorhiweTi 


Home 
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导航一致性 



没有一致性的导航让用户感到困惑^ 

我们人类根据亊件的可预测性来与周围环境互动。 
每一天， h 百万人在红灯前停下,等到绿灯后再向 
m ^£ 0 但如泶红灯后不是绿灯，而是蓝灯呢？你大 
概完全不知逬该怎么做。 

异航也是相同的道理。当导航系统运作正确时，大 
家会依赖它 & 在 CNM 系统里，导航区域出乎用户 
的预料，大概是因为它违反了下列三项原则之一： 

o 导航应该在用户希 M 导肮出现的 地方： 

通常是网页顶端或从网页左右两侧中 
挑选一侧。 

Q 链接应该有链接的样子。它扪应该给 
用户一种“可以点击” （ clickabl 幻的 



感觉 


0 我们应该能淸楚地辨识链接，而 R 可以 

区分各个链接 



磨笔上路 


CNM 的网站导航是否遵循上述原则？在每项原则旁边，对 
于 CNM 现有导航符合该项原则的程度，写 下一些 意见。 
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习瘅 


使用下列页头图像，为 CNM 网站画出三种导航设计。请考虑网站的一致性以及这个 
网站的典型用户对于主题的熟悉程度。 



cnm 


COLLEGE OF NEW MEDIA 
HAC KiHAC STATE UNIVEftSfTY 




cnm 


COLLEGE OF NEW MEDIA 
MACKINAC STftlEUHlVERSfTY 
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块导航 



9越薄芩 


你的导航设计有何成果？你是否能想出明显遵守第208页上的三项导航原则的 
设计呢？ 



分英甚种用卢含觉馎徇劣敎悉的选择- 
fg 的子网玷的整你生蛭似呼不太这用 。 



^分珩 S 球， (f 晰笱鈦击. 抝5之问又有 
S 别 。 辦以它们是很受欢逆的导叙设幵 


S 


kcnm 


COLLEGE OF NEW MEDIA 
MACKJHAC STATE UNIVERSITY 



这种设分很蕊迨分页.分铥钱妁让—投用 
f 曼觉得 gg 点击铦指 g 



破样式的4 权很 (1 含 CNM 网站.兩 
J ] 式现起来也很轻松俛适。 ’ 





这神导# i 设幵鸟 CWM 涿有的方式很招帮 
組 44 的 wtiw 鸟 iiovcf 徒忘加 X * —点背呆就& 

个玟 >6 子垮 的啟本 6 
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f 5 . 



我其的很舂欢分费#式 0 为{十么不采用 
分克，然启钤改余掙分的设 i 十采 K 
含分兗哝？ 


Joe ： 我 id 得注册主任讲过，他们很喜欢目前的设计,只是 
想修正导肮问题吧? 

Frank： 此外，我认为导航应该配合设计，而不逛反过来改 
变设计。 

Jim ：为 H •么+行？我们不是一致 M 患异航应泫从制 
作 IA 的阶段开始吗？所以说，导航不就会彫响设计吗? 

Frank: 呃，制作 IA 时，我们只需要确认分类名称简短-■■… 

loct ……以及说明淸魅^ 

Frank: 对。但是它们与导航在网页上的实际外观没有关系^ 
Jim： 所以我们只能迁就现打设I十？ 

Jae： 我不太确定这谇足迁就。它的设 汁还 小错，我认为不 
需耍莽乱一些已经可行的东西。 


^ Ftdnfc 


Frank： H 是如此。人家可不会付我们额外的设计费啊 

jim ： -… I 井辩苻洲。我想，学校应该不会为 T 当好人而 

多付钱吧! 

Frank： 人概不会。 我觉 得沿陡方窠是 采用简 单.块样式的 

Joe ： 就迠在诗肮链接间加人分隔线的选项，对吧？ 

Frank ；没银。 

Jim ： 为什么你把它称为块导肮? 

Frank： U: 我做给你看……其实是关 T 创建这种导航菜单所 
盂的 CSS …… 


?鹌你在 R 站设计任# 
中的儀色。你通常很少 
©为 乌核心任务元兵 
的“额外 u 工 作而拿 
到猫酬。 
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块元素 


蛾 X 素是我们的好朋食 


块元索 (block element , 如段落与标题）正如扣名，形成一个横跨页而的 
坱。另外，块元索默认的商度与它们包含内容的一样。 一 

我们已经设定链接为块元素，以下是稍卑加上的 < li > 标签： 






<ul id= M nav ,T > 

<li><a class= f, active'* title= n CNM Home" href= M index.html 11 >Home</a></li> 
,<li><a titl 0 = 11 # 11 href= M # ,, >Students</a></li> ^ 

<li><a title= n # 1( href= ,r # 1, >Faculty</a></li> 备 

<li><a titles 11 # 1 ' hr 0 f= ,, # ,, >About</a></li> ^ -- g 个 < U > 郐&一个缺无 ■ D 

</ul> 


但我们可以调整块元素的商度，也可以调整它的位置。块元尜的好处——以及 
它们为何是优秀的导航元素，就是块会自动水平 对齐： 



容幼 
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智慧导航 


淳动 CNM R 站的琰导航 

如果把导肮中的毎个视为块，则只需嬰 为这些 块加上 CSS 样式 & 我们 
可以加上边框用于区分每个块，并根据前 一个块 决定下一个块的位 ? L 

i 占在你的 screen.css 里做出如下 修改： 



screen.css 


#nav 


} 

#nav 


} 

#nav 

} 


float: left; 
width: 460px; 
height: 75px; 
font-size: l*4em; 


共；的下®。衿5箱决这个问 眭. 我们 f t 把<“ £ >择衫 
在倒# ©定 S 的 f 度，它另含呈现在页共的勞这-布不 

4下®。 


li a { 
float: left; 
width: 104px; 
height : 65px; 
padding: lOpx 0 0 lOpx; 
color: #fff; 


^ U < ui > , 我 们 電荽 让 链 尨命肩 浮动 来後怃 
话楫式。 链相舍有®宠宠度鸟其廋， 这样一来, 
乇论殳字长度如何变化_ 马舦刘 表里的场杓有 
—致的 外蜣 3 


text-decoration: none; 
border-right: Ipx solid #777; 


li a.active { ~ active r 类的:■菜 运哲 杀将衿 0 窃闷页的链孩加 

background : #222; 分的外松， 

网站 的何 4 L 



ntact CNM 

0 t*C ■- 
iu^*c Stifi* 


cnm 


home 


MLIiCEOFNEV/MEDIA 
MACKIHAC STATE UHlVERSm 


这个 CSS 洽戏们一个阁孝 
:爹、姑桷提用卢視钱的导较 
系统。现沭兹 S 分允专 

链戏3, 


TIM3 


■办 Up^to^Art 
|J|J» uri. 


New Media 


VM 

«wn* c* 


tfvh^Jy n m 
pn Tr^c cyrnpytjrn oruO<i 
«*U*i W V 


£r Utn4 M*WE« H» It** VU Cf WU!y * pf*f*f** 

nCa-ig t* tectirc^og^vi?^ tfa^AC^v ■ ■rV^yi^f* ranlu&i*. ■apsf trmMtyv 




Why CNM? 


^c>l ㈣ *S«<H 

«^ V » T 4 JVtg i , 


>.L^vV^ntufl 


争 um. 

new i^6*i 


Students Faculty About 
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品牌与图标 


好螬， m 用 m 卑姑达一点，饽的癞 
法非聿正碥。珀通起來不错。侄我敢打味. 
你会间葱我揸卞采的着法——这些小©标 
太箝獯3 j 


0 


_些老 Jfm 所说的 ■) ■囹 



谲惑 是优秀网站设 计的 
大敌。如果某个东®让 
你®惑，大橛也会让你 
的两户非常非常©惑。 



Frank: 是啊,我也这么觉得。那些图标是什么东西? 
Joe； 我试笞按了那■图标。它 n 其实也是导肮系统。 
Frank： 真的?它们会通向哪里? 

Joe： 通向不同程度的子站点。其中-个是视频游戏…… 
Jim: 啊，我看就是那个校得像游戏手柄的图标吧？ 

Joe： 是的 & 但其他图标刪-…- 

Frank： 等一下，我也要猜。如果囹标的意义够淸楚，我 
应该 "f 以 PIQ 猜到它的用处，对不对？ 

Joe :哈，说不定吧！祝你奸运， 

Frank： 让我看看。这是间新媒泳学院，所以…… Web 设 
计^其中一个是 Web 设计吗？ 

知《 : 哇，蛮准的！ 

Jim: Frank, 等一下…… 哪个图 标代表 Web 设计？ 

Frank, ……老实说，我不知道…… 

Jim ; 这就是我先前说的。我们必须处理这些阌标。找共 
至不知道可以点击它们! 
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智慧导航 


裰标无法表达任 何鴦义 




没错，图标是很酷的设计元索％问题是.当它用于导航系统时，可以造成 
一些严重的问题。这个图标究竞代表什么？如果点市图标会发生什么事？ 
这个网站会把我带到哪里去？ 


( S 耔看这""魚邾有嗲，_义° 


你看到某个图标时想到的意义或许与另一个人所想的意义完全不冏。如果 
采取图作为导航元素，用户可能会对图标带畚他们前往的地方有错误的 
想象。结果呢？用户被带到他们原本没有打算前往的地方，然后这位用户 
极有可能会跑到其他网站。 


看看 CNM 网站上的图标 ■• 它们的意义明显吗? 


一疋笔上砗 


写下你觉得这些图标代表的意义，或者点击这些特殊 
链接会看到的画面。 




目前位罝 ► 215 


















在导航中使用图标 




磨 笔上阵 
酵答 


以下是新媒体学院提供的图标意义。你猜对了吗？如果你能 
猜对其中两个，就可获得 AID (Ambiguous Icon Detective ) 

大奖…… 


ii 个©杨代表闻页， 它用 吁指 
^ CNftA m 



Web design 

V » « » + ■• ♦■鼉 ■寺 



手柄©拉代表 video S ⑽ w 的设 4程 

这差一个0黹明 S 

的©辟6 



(rame design 


■¥ 


Computer Animation 

r ■ ■' n r n ■< ■ r ■ ■ v ^ fg' ■ ■ ■ ■ ^ ■ — — V 1 *F W V V V V 9 

V ci 个©杉应戌看起来溪差一 
个人奋电 M 4 单 i 绝步 & 它 



digital Writing 备 



这差个常用的©钐— fl 统的铁 
和笔。本制中.达代表兹字 S 作岛 
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苻时候我们受困千丧达不洁的视觉元索，也可能遇 
到允盘义或令人困惑的图标，如果你无法做出艰大 
改变，加人文卞足个 较轻松 的修改方式，用文字澄 
淸圍标的意义，成解释如何使用某个网 页元 尜。 

加上一点解释文字，就能 U : 用户知道该在网页上点 
击谁或让他们理解前往的地方 t 
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智慧导航 


为丈字艇上摻标，而不是为谤标艇上文字 

罔前，这四个 CNM 的阁标都婭桶人 XHTML 的小图像。如果想为这些图标添 
加文卞说明，我们需嬰把文字挤人毎个图标里，可能还要调整图标的尺寸、安 
排文卞与图像的位罝…… 然后事 估很快就变得釭杂。 



©杉 的笼度左找甚 多少方 
能将 Ki 字? 



Game Design 琛奋多 了吾种 鄯列全字 

- 囝氓伎若的问狴 ^ 




我们可以做什么？假设从文宇若手，例如 "Web Design” 与 "Computer Animation" 6 
图标应该是链接，所以我 ff ] 可以用 < a > 标签围起文字^有了 < a > 标签后 t 就能 
用 CSS 加上 样式。 





i ： 楫式？•…" LI 


UL 


. 兩5芎以致入发有 



W 了可以设定样式的元素，即可绕过所 有位迓 排列的问题，并把图标插人为 <li> 文字项 
的背妣图像。这表示 <li> 项将自行扩展到正确的大小I神者，因为毎个链接都是 <li>, 
它们也会合适地自行排列。 



| E|gj K 

HMHBIHdi 




Gmmm Dm* 


哉们苟以為 S 个<^>设左锊景®译尿性，僅苷 
茶 ©係妁合 ii 的©杉44俘排列正 碭。 





-v background: #dddddd url('web design-icon. gif f ) no ^repeat left center 
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css 背 最图像 


E 新 CNM 的 XHTML 认使阁文孪键狻 

请打开 index . html ， 并从 XHTML 中移除阁标圈像。我们需要一份新的无序列 
表，为毎个链接使用<11>和<心。链接名称使用文字，然后再修改 CSS , —气 
呵成地为毎个链接加上样式。 

诮在你的 index.html 副本中做如下 修改： 

<!DOCTYPE html PUBLIC ''-//WSC/ZDTD XHTML 1.0 Strict//EN ,f 

t ’htt:p:"ww*w3*org/TR/xhtrnll/DTD/xhtmll-strict ： -dtd t ’> 

<html xmlns - ,, http :// www * w 3* org /1999/ xhtmr , xml : lang = H en r, lang - if en fi > 

<head> 

< title>Coilege of New Media I Mackinac State University </ title > 

<meta http-equiv= f *Content™Type M content-"text/html; charset=utf-8 1, /> 

<link rel -^ stylesheet 11 hr ^ f = 1, styl0sheets / screen - css ,1 type = ,1 text / css ,r 
media = l , screen ,T /> 

</head> 

<body> 

<div id= ,r header lr > 

<img alt-"cmn logo ,r src^^images/cnm _ logo-png' 1 /> 

<ul id- f, nav ,f > ~ 

<lixa class = r , active " Home ” href ^ M index . html , i > Home </ a></l 1 > 

<lixa href= ,, # T, >Students</a></ii> 

<li><a href-* , # ,, >Facuity</ax/li> 

<lixa title= ,l # ,t href= ,1 # t, >About</ax/Xi> 

</^ i > 这个列表场為苟耗殊类到 * 辦以戧们餡的 Ci 份扣 表加上 不同 吁筘他链戏的 

</div> /样式」 它0常緣次组#杖的彷鈕名彷- 

<div id= ,, subnav n > 

<ul> 

<11 c las s^ 11 opt ion TI >Programs </Ii> 

<liXa cla s 3= 1 r webdesign" href= IT # ,r >Web Design</ax/Xi> 
liXa cla s s= v 'animat ioa f 1 href = 11 # 11 >Compute r An imation</aX/l i > 
lixa class= 1 r game rf href = M #' r >Game Desxgn</aX/li> 

<XiXa cla s s=' r writing f, hre f = n # M >Digita 1 Writring fiamp; Rhetoric</aX/li> 
</ul> 



rr 

C 

C 



</div> 

<!-- etc … 

</body> 

</ htiril > 

这个链戏列表在孩钚常溪主專躭 1；^ 
详4係你的色舍导軚的 <仙> 驭）不 

同的阳。 



V ^咢一逻代表链 趄的占 沄符咢 s 劣我们知 


S 个链戏部有句3的蛊糾，我 (D 对芍鈞# 
#指金正 4 的® H 



index^html 
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智麓导航 


现在玎为新的 块元素 加上#式 


现在可以将下列规则加人 screen.css， 来为 subnav 与相关元索 


加上 样式： 

#subnav { 

margin: 0; 
padding: 0; 
background ： Sd2dbc0; 
height: 46px; 



< div > J 0 o 这祥可在僅用祥式的更 
加 H 


#subnav ul { 

list-style-type 

#subnav ul li { 

float: left; 


none 


栽们 f Jt 据胧酞汄的场 0 符咢 
合用在这萤 。 




margin; 0; / " Jt 

padding: 15px lOpx 15px lOpx; 今筠的规则,看龙来财攻 

font-size ： l-4em; ^ f 请这意 利用 

tsubnav li.option [ 

■ text-transform : uppercas 

background: #b2bf 99 url(’ , ./images/option _ li _ bg + gif ■) no-repeat right 
padding: 15px 25px 15px lOpx; 



color: #7£8e62 


} 


#subnav li a { 

padding: lOpx 0 lOpx 35px; 
color: #333; 
text-decoration; none; 

} ， 

#subnav li a*webdesign { 

background: urlf f *,/images/webdesign 

} 

#subnav li a-animatioa { 

background? url( r (t /iniages/animation 


链掂鄱有 t ) B 的类到 _ 钱 fi •我们斿定 7 
，爷背 #5) 緣 。 磧痛俘僅用; J MO —7Cpen£ {]5 
这待对 不会让©係鹐 溁好著。 1 * 



icon^png 1 ) no^repeat left center ； 



screen.css 


icon -png 1 ) no-repeat left center 


Ssubnav li a,game { 

background: urlt 1 ,-/images/game _ icon*png , ) no^repeat left center; 

} — 

flsubnav li a.writing f 

background: url(\,/images/writing icon-png r ) no-repeat left center; 
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主要与次级导航 



- mm - 

打 J ? 你的浏览器。突然间，顾本让人困惑的图标变得淸楚了，而 ii 你也保存了图标 
的完整性……这是注肌主 任认 为非常屯耍的事。 


i ❹ €)0 

■ -• 1 _ * • _ , 

1 T ] V ) fc] 






aim 



m MECL 4 

MACKINAC 31 ATE UNIVERSE 


SfuctMi-s 


Fflou^y 


麵職物 n 


I CmpLi^r Ammdlioii 

r " 


珍 ^ Wf^ ^ RJistorte 


• ft、 



Contact CNM 

Tha Coflcge ol New 


Hmi Mad4 
r UeirrtfSity 


New Media 

The CoIcqo of Nm fAotita at 
■mprdesQp^tiwy coufsc of s!udy m ttio sysfe?^ 


.. 1234 Up NorHl Aw 

1 EasS/^ymtWt.MI W9S4 


^ COUfSC D1 
iformation 


and theory of infbfmatiofi. Tbo curficuKim enables 辑 udomA to ifTwsligalc the 
creative and appled processes esscnljaf in Hits a/ea Df sEudp K prepares 
studAnte fa t^iednaiogicaiy cap^se^ artcutaie tnank*« F and creative 


O 
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智慧导航 


主导航不应改变 . 

••…但次级导航应攘変化 

主导航 （primary navigation ) 提供前往网站主分区的链接 5 对 CNM 而言, 
主导航是主 页顶端 的块,呈现了 " Home " . “ Students ” ， “ Faculty ' 
- About ” 等分区。这些链接(即使朱出现干全部网页)应该出现在网站 


的大多数网豇上。 这显我们的 i 马舨 







Home 

Studente 

Facutty 

About 




P 


次级导航 (secondary navigation ) 是链接到网站子分区的导航 e 次 
级导航应该 T 特定时点应用于网页发生的特定事件及用户位 T 特定 
地点的状况。 



在主页次级导舦接供？许多 g 


假设按下 CNM 网页上的 “ Faailiy ” 链接。主导航链接仍然苻合 
理用途，但次级诗肮——程序链接，大概就 没苻用了 ^ 如果按 
下 " About 11 链接…”，这些链接仍然该出现吗？ 

为每个主分区一 “ Students ” 、 “ Faculty ' 
" About ", 辦键-个暇 （ HGme 就是麵腑 
泣娌 的 〖 ndex . html ) a 只霈要复制 index . html 到三个文 

件里，并更改文件名称。然后，修改每个新网页的 
标题，以符合网页代表的分区。 

下一步，使用第198页的 [ A 图来更新每个新网页 
上的次级导航（先别在意文字内容）。 


主导航瘅兩至 蝥个 R 
站 o 

次级导 航应用 至 R 站的 
当前分 S 。 
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次级导航的编码 


毎令孑页®鄯有 f B 的次級导航 

打开你为 "Student" 分区创建的网页，我们做的文件称为 students.html 。 
我 们需耍 改变网页标题 （ <title >) ，并根据 CNM 的 〗A 图更新次级 导航： 


CDOCTYPE html PUBLIC ,r -//W3C//DTD XHTML 1,0 Strict//EN n 

,, http://www,w3,org/TR/xhtmll/DTD/xhtmll-strict,dtd ,1 > 

<html xmlns- 11 http://www.w3-org/1999/xhtml ti xml;lang= M en M lang= 1t en 1, > 
<head> 

<title>Students | College of New ltedia</titie> ^ - 


㈣ 梅 


cmeta http-equiv= ,1 Content-Type ,1 content= Tr text/html; charset=utf-8 M /> 
clink rel-"stylesheet M href= 1l stylesheets/ r 5creen.css ,1 type=’.text/css ■’ 


p 


media= ri screen f, /> 

</head> 

<body clas s^ f ^page 11 > 

<div id- ,, header ,r > 

<img alt™ ir cmn logo" src-^images/cnm _ logo*png ,f /> 
<ul id= ,r nav M > "" 



峩们蹭加 3 f 

不 钧 号圭英 inJex-Mmt 的 
楫式 o 


<li><a title =1, CNM Home" href= l, index,html ,f >Home</a></li> 

<lixa cla3S- ,1 active ,1 href- ri students.html l, >Students</a></li> 


<li><a href-*'# ,r >Faculty</a></li> 

<lixa href= M # ,r >About</ax/li> 

</ul> 

</div> 







<div id="subnav_’> 

< ul > 

<li class=”option_>Studants</li> 

<liXa href= 1, # l1 >New Media</aX/l i> 

<liXa href=’.Our facilities'^Facllities</aX/li> 

<liXa hra£ =, 'Apply t:o the CNH TI >Applying t:o CNM</aX/l i> 
</ul> 

</div> 

<div id=’.wrap_’> 



我们保留了 4 ' option ^ 

称挺名 "Student" n 

W it f active jl 

1 列表 <0 中的其“ 

场根孩 CWM 网站的 

个分咖3的 


<p class= 1l crumbs' , >Welcome to The College of New Media at MSU</p> 
<div id =1l content ir > 


<p>Content</p> 

</div> 


<div id=’’sidebar._> 

<p>Sidebar</p> 

</div> 

<div id=.’foote r u > 

<p>Copyright &copy; College of New Media at Mackinac State University</p> 
</div> 

</ div > 

</body> 

</html> 
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智憩导航 


用 CSS 加上导航的样式 

真的做出一些次级导航后，即可添加一些 CSS 规则，为分区网页设定样式。 
毎个分区网页的主体 (< body >) ,其类别赴 H page w ,这样才能另外设定 
它的样式。 


ttsubnav ( 

margin; 0; 
padding: 0; 
background: #d2dbc0; 
height: 46px; 

} 

#subnav ul li { 

float: left; 
margin: 0; 

padding: 15px lOpx 15px 10px; 
font - size: l_4em; 

} 

#subnav li .option { 

text-transform ： uppercase; 

background; #b2bf99 ur 1('*- /images/option _ li _ bg.gif') no-repeat 

right; 

padding: 15px 25px 15px lOpx; 
color: #7f8e62; 

} 


#subnav li a { 

padding ： lOpx 0 lOpx 35px ； 
color: #333; 
text-decoration: none; 


} 


page^subnav li a { 

padding: 15px; 


; 主啻， p ^ e 的声明 7 每？ Ci ： &法诉 CSS • 只在 
<^> B 有屬伐 的， 为应用这场想 

則。运祥可#分这网否的如心夭索议外不同吁主 
英 index.hmt 的祥式。 


1 、 

-page #subnav li a,active^ 

background: #b2bf99; 


这个这拒 (padding) 将僅我 ff) 的 
active 島 havet 妖态鹐溝整个铁。 


这个灰强笆坍妗次 S 链掂的 Wive 鸟 hov ^ H & 
带瘃不抟的适采 & 


仍然岛两玷中 A 他网历僅用阌一份 CSS 。 
它现在也钺处理分 ® 网费！ 



screen .css 
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妆点门面 



创建 students * html , 并更新 index . html 以链接到这个新网页。请确保更新了 
你的 CSS 义件也淸一并为 " Faculty ” 与 " About " 分区创迚文件。 


然后乂到了测试作品的时间 4 这一次，淸打开 index . html ， 然后选取一个主链 
接， “ Students ” 、 “ Faculty ” 或 “ About ” 都可以 e 在悔个分区网贞中，你应该 
要矜到符合本网站的 IA 阁的次级#航另外，毎次鼠标移过次级导航里的链接时, 
它应陔变成稍深的灰绿色*。 





Now Media 


Applying to GNM 


STUDENTS 


Facilities 


New Media 


Contact CNM 


The C^lJflgo Of N«w 
Mackinac SEAtft Un#ver$Jty 
1234 Up Norm A™ 

- East Mywlwo, Mi 229 狀 


The Coiicgo ot Kow Media At MackinEic Stale Unnvrfi4y offers 
irl«rd4cipfcnajy coors$ of ULrdy m Ih^ ty4E«mi, h>e«ory p 如托〜 

and llwofy fff m(ormalJon. Ti%o cuttKuiim cfiAbbt Hudcnls lo mvntig«ie Iho 
cr«al»« and apphed proceu«a e-s^ntLai toltirs a p cra 4f study. 11 pffipdres 
vhxf^oiB to bo i«hnoiooGoity orbaj^itfl ihinkoii, ond m wjin 

pro^<34UonAii. 

Why CNM? 

Tod Ay, ti liu 也 C^m^uCut and «uuntly TCWS 

h&$ iAutod i Hun mo wayfl in wNch wa crAAiD, i^u, iinddrftta/^ 

at%d distribute kfirormotlan. Tho advftnl 咖 convargorKA ol now kdeas h 

afhd inf&finflta&n tysianMnat f&fam^d tha faiafen^l^ a( irw 


狭杉移过次组马 
鉍的 M 跬的含 
僅块的锊 fi 巧 
fe 深的灰猓色 s 


and irtfomiation tyslcois n^i rakim'«3 tfte raiabonsMp of ’ 


s _ 迈命苟 t 
6 的攻 迈召軚 


©GO 


enm 


&UH 3 c?nto 


Facu^y 


f-k.HT'lT 


AEXJtil 


COLLitSLOFNLWKELllA 
MACWHACSWl UHlVEfiSflY 


m&DMign Iw? Com 峨 r ^hnatton 。 0 ««^ 歐 O^wWddAg or 扣 MMdc 


F^oaRMis 


* 编注：从 Head First Labs 下载的 CSS 文件里应话加入 'page #subnav li a : 
hover { background - color :# b 2 bf 99; }” 才有從标移过链接会变色的效果。 
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智慧导肮 


你的 Web 设计工異箱 

b 经进 ㈣ -半了，现赫 e 经搞定了导航的 
问题。你的网站具有了良好的组织，而用户可 
于其中自在游走。接 下来： 网站写作。听起来很简 
单，是吗？等着看吧…… 


复习要点 - 

H 使用网站的信息架构作为导航系统的基 
础 u 

■ 主导航提供网站前往主分区的链接。次级 
导航在主分区下提供前往子分区的链接。 

■ 为导航元素命名时，请使用既简短又富描 
述性的名称。 

■ 水平式导航设计特别适用于一栏或两栏式 
的布局 & 

■ 如果你的网站采用垂直设计的主导航，请 
别让次级导航元素出现在网页上较高的位 
置 。 

■ 导航系统的目标是让用户知道自己 
(在网站整体架构中）现在的位置，并提 
供决定 下一个 目的地的方式^ 


»为了避免困惑，请在整个网站里维持导航 
的一 致性。 

- 谙确定用户能快速学会你的导航系统<« 

■ 视觉上的线索向用户指示当前网页在网站 
整体信息架构中的 位置。 

■ 别（单独）使用图标作为导航元素——对 
你和对其他人而言，某个图标代表的意义 
可能完全不一样。 

■ 如果想在导航系统中使用图标，请一并使 
用文字来为用户提供图标指向目的地的清 
楚指示。 
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7 网站茸作 




你在扫读! 


这几 S 










望能在 R 銪上着到 


迖样我们就不 


用抡居浥 报班了 


为网站写作和其他写作一样，对吗？ 事实上，为网站写作与为印刷 
媒体写作完仝不 同。 大家阅谈网站上的文字时，并不像阅谈印刷媒 体， 
我们不洱从左而右、 由 上而下阅成，而避采 用扫读 ( scan ) 的方式。网 
站上所仃文字必须可被用户怏速 扫读 汴容易 理解。 如來不能这样，用户 
不会浪赀时间努力读你的 M 站，他们将直接前往其他地方。本章中，我 
们将学到许多写出可扫读文字的谈窍，以及如何把现苻文章改写成易读 
版本 


进入新章节 227 



阅读屏幕与阅读印刷媒体 




磨笔上陴 


阅读屏幕上的文字与阅读纸上的文宇不一样。这点对干网站写作#常 m 
要 0 別只是单纯地接受这个论点，你可以自己试试卷。 

首光，阅读 www * headfir stlabs * com / books / hfwd / ch 07/ text / index * 
html 上的文字井记录使用的时间（请在本页的空白栏里写下花费的时 
间）。 


现在，阅读下面列出的版本，同样记录使用的时间 




Colcco Industries, which was originally named the Cormecticiit Leather Company，was 
founded in West Hartford* Connccricuc in 1932 as a shoe leather company by Russian 
tmmigram Maurice Greenberg. Moving into p]asdc molding in the l 950's, Caleco 
eventually sold off their leather business, and became a publicly traded company* By 
che beginning of the 1960s, the company was one of the largest manufacturer of above¬ 
ground swimming pools. In 1976* after an unsuccessful attempt co enter [he dirt-bike and 
snowmobile market, they released Tdstar, a done of the home PONG unit being sold and 
marketed by Atari, 


Despite the fact that Caleco was certainly nac the only company releasing home PONG 
clones, they enjoyed moderate success and went on to produce nine more varieties of 
the Telsiar unk. Unfortunately, in 1978, as the home video game market moved to 
programmable，cartridge based game units, Caleco was forced to dump over one million 
obsolete Telscar machines ai a nearly crippling cost of more than 20 million dollars. 


Coleco president Arnold Greenberg ignored this near disaster and directed his Research 
and Development ce^m io begm work on a new home videogame system, the ColccoVision, 
which he felt would sec the standard in graphics quality and expandabilicy. 


阅读在线版本所潘时间 l 
阅读纸上版本所需 时间： 
哪一种方式更费时^ 




为什么？ 
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网站写作 




噢 f #托， R 是©为肋银 沔站上 
的文字比 餃谩， #不是所笮人在 
R 給上的 阅 锿 稃比较 «吒 f 



Frank ： 别这么激动 6 芈实上，大家的速度都比较慢 a 真的，阅读屏嵇 
上的文字比阅读纸上的文字俊。大家阅读网站的速度比阅读印刷媒体的 
速庇拗15% & 

Jim : 开玩笑的吧，任何时候都一样吗？还其是慢了不少啊 & 

Frank ： 不只如此。非常近地盯着电脑 屏幕: 你看到了什么? 

Jim : 呃，眼阽好痛。屏嵇上的文字显得很朦胧。 

Frank ； 没错。阅读姊福比较慢的原因就是电脑显示设备的分辨率比印 
刷媒体的低 太多。 

Joe : 哦，我知道了。我读得比较慢是因为眼晴与大脑正在试着补偿模 
糊的文字吗？ 

Frank ； 正足。 而且可 能比阅读印刷文仲时更快觉得双眼疲劳。所以我 
们阅谈邡蓀文字的方式与阅读芄他文字媒介的方式不一样，以避免眼 
睛痛与头痛 。 


Jim :但他们都不知逬自己读得比较慢吗？ 

Jae ： 你发现自己读得慢吗？ 

Jim : 嗯，没发现。这一点对我们的网站写作有什么帮助吗？ 

Frank ： 用户会扫读 { scan ) 网站文字，从中寻找对他们而言有意 

义的关键字句卞及段落 6 所以，如果你的写作方式特别针对可扫读 
( scanablc ) ,用户会近快读完你的内容，也更能理解并记住你的讯息。 

Joe ； 听起来像是文案写作 ( copywriting ) 的圣杯。 Frank ， 你确定白己 
没有搞错吗？ 

Frank ： 确定，可扫读的文字为用户带來更好的网站体验——也就是说， 
用户将婷留较久，而且会更常回來^这就是以用户为中心的设计的所有 
觅点——给用户想要的东西并 U : 他们回来得更多 & 
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测试你的理解力 




磨笔上阵 


准备一个秒表或计时器，只用20秒阅读以下段落，然耵 N 答 
文取下而的问遐 U 別作邨：请在阅读文饮后再菥题 Ro 



这会豕 f 的仇器 


Co\cco Induscrics, which was originally namccl the Connccticuc Leather Comparty,. was 
founded in West Hartford* Connecucut in 1932 as a shoe leather company by Russian 
immigrant Maurice Greenberg- Moving into plastic molding in the 1950、 Colcco eventually 
5old off their leather business, and became a publicly traded com pan y. By the beginning of 
the 1960 s, tfic company was one of the largest man u fact urtrs of hove-ground swimming 
pools. In 1 976, afeer att unsuccessful auempc to enter the dirt-bike and snowmobile market, 
they released Tclstar, a clone of the home PONG unit being sold and marketed by Atari, 

Despite the fact that Colcco was certainly not the otiIy company releasing home PONG 
clones, rhey enjoyed moderate success and went on ro produce nine more varieties of the 
Te!w unit. Unforuin^cely, 1978, ;ss the h o mc videogame market moved fa program mablc, 

cartridge b；tsccl game units, Colcco was forced to dump over a miHion obsolete I'dstar 
machines at a nearly crippling cost of more 20 million dolinrs* 

Colcco president Arnold Greenberg ignored this near disaster and directed his lUmrch and 
Design t ca in ro begin work on a n c w h o m c videogame system y t h c Colcco Vis i on t which he 
feh would ser ibe standard in graphics quality and expandabiiicVi 


❹ 


❾ 

❺ 


Coleco 发行的家庭游戏机仿制品叫什 
么名字？ 

Coleco 建立者的姓名？ 


20世纪70年代，谁是 Coleco 的 
总裁？ 
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网站写作 


以同样的方式，但改读下列段落。别作弊！先读文章, 
再看问题 0 


The Release of the ColecoVision 

ColccoVisian was released in the summer of 19S2 at 2 retail cost of $I99 f featuring several 
noteworthy advanccmetus: 


■ 


■ 


The ability co display 32 sprites on-scrccn at the same time 
A 16 color on*screen paleue oui of a xoial of 32 
Three channel sound 


Donkey Kong: The Key to the ColecoVision’s Success 

The key to this new systems success was its included cartridge* In the ease of the ColecoVision, 
Colcco successfully negotiated the right to release ihc smash arcade hu Donkey Kong. 

Donkey Kong: Legal Problems with Universal 

While amazingly popular, Colecos release of Donkey Kong with the ColecoVision was not 
without its problems. Universal Ciry Studios Inc,, believing that Donkey Kong infringed upon 
their own Ktng Kong f threatened both Nintendo and Coleco with legal action. With a large sum 
of money already invested in the license, Arnold Greenberg agreed 10 pay Universal 3% of the ner 
sale price of the game. 

Coleco Caves and Nintendo Fights Back 

Unlike Coleco, Nintendo fought the Iawsuit> oFfcring numerous in-court demonstrations of 
gameplay vs, movie plot- Nintendo argued that in a previous case, Univcraat had argued that King 
Kongs charterers and plot were in the public domain, Nintendo successfully argued its claim 
and was awarded $L8 million in damages. This prompted Colcco to file as well, earning back a 
portion of the royalties they had previously paid to Universal, 


Q ColecoVision 可以同时在屏幕上呈 
现几只小精灵？ 

O ColecoVision 包括了哪个游戏？ 

0 哪家公司因为版权问题而控告 

Nintendo 与 Coleco ? 
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你记住了什么? 



磨笔上碎 
薄答 


备位已分 別花了 20秒阅读了两段文帘，然后回答我们列出的 
问题。你的成绩如何？ 


O Coleco 发行的家庭游戏机仿制品叫什 
么名字？ 


O Coleco 建立者的姓名? 


Telsfar ^^ 




Maurice ftreewberg 

令_¥丨甲》¥1*響.-_琴画¥冒-画，¥丨甲1甲»»匿甲1 1 -8 | 甲-甲甲甲¥甲--甲，琴？甲 1 «- | 1響|_1¥1_啊咿 


O 20 世纪 70 年代，谁是 Coieco 的 

总裁？ 


Arnold Greenberg 


杏20#内.伪餑看到 


O CotecoVision 可以同时在屏幕上虽 

现几只小精灵？ 


它&纠象的第二 
/ 场 . M 以奸常容 

P %"! 翮嚅響琴■■琴 ■«. ■■甲 ■ ■■甲 V 甲，甲，甲 | ■琴，甲霣―，琴，■胃琴琴 '■ 


0 Coleco Vision 包括了哪个游戏? 


© 哪家公司因为版权问题而控吿 
Nitendo 与 Coleco ? 


Powkey K_ 


这条信总 ft 5孖几次. 
也出现在 鉍二和 蓽三 段的 
士杉 ■ 尨 f 。 



冏，祕，很容劣想起来 ■ © 
4它在絲伪的哆时含 
t 劫被窟体宇吸引。 


特別写成可供扫读的文字更容易快速阅读与理解。一篇文帘在 
S 作时顾及可扫谈性，另一筇则没有。你觉得各是哪一篇呢？ 
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网站写作 


打造更好的在线新闻 

冇一家地方独立报纸 Hipster IntenigciKei '， 他们非常赞赏 RPM 唱片 
网站的成功，所以決定廂你创违在线版的 Hipster Intelligencer ^ 

虽然这家报纸•在都也写得好的文章，敁近却逍遇了读奔流失的问 
题。+:编也想在网站屮添加报纸文章以外的内咨。他认为，加上流 
行文化的电 脑与游 戏热门新闻，应该会受读者的 欢迎。 这个项目中 
最大的挑战不是布局——而是为万维网 ( Web ) 写文窜新 M 站是 
拯救这家报纸的敁后机会，他们肖的很需要你的帮助…… 


览的很恩谢你狻7迖个项 S 。 动 
工前，你玎认先在紙上让我邊潘 
两站 外艰的梅念鳴？ 


X\iz ilipsttr dnrclligcnci 
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工作规格 


Hipster Intelligencer Online : 项目 

SSJi 職棘了 — 些聰。齡獅预齡麗立 


规掊 


1. 网站必颏采用三栏布局，以便放 jt 大量内容，并维 
持 44 像报纸”的外观与感觉。 

2. 所有标记 （ 包括 HTML 与 CSS ) 必须经过 W 3 C 验 
证工具的检验& 

3. 主页必须有个放置照片的区域作为封面报道的视 
觉元素。 

4* 标题一一 The Hipster Intelligencer 必须出现在网 
站顶端开始1/3的区域里^ 




5,最终设计至少使用三色设计方案。 


舍關慨 


《Head HTML 》 的 
第6耷鴣細饵这个 



这点不金太4 




问邂在子丈孪 

上述规格似乎都不会构成严重问题不过 • 规格里少了 -项社 议题: 

!^ St T fn _ ㈣ 容多 半奴字 一 很_ 多文字。所以我们必 
j 纽立-‘个具有大量文字的网站，同时还要贿可臟 < usable ) 与时 
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完成分镜表 





涂3浊5攻龙 ret . 

览茁岛 . K4- 细芬 

斜 y > 啟一命 <彻 

命油 f 笨画寻 蚪' 

硪龙®盘鈦 S 坌 

命) . 音®—從 

段旃 1 谢浚取■冰 

S 刼 isw * 轴朴鍊 


# 碎卬敗满雄 S 拱港萌画任 — 丰涞 ■ 啩朋3凃瓣姍。 alrT 到 s^ 瓣鎺睜 41 tb 热，苕 S 
薙併笤窗？苕迪7物守苫渖泯？ 


at ■隊 fi-5S 划 s-fttIT'^ 




笫 3 R 迪 fj 办冻，鉍咏 ， is 
% 
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以下是基础 HTML 与 CSS , 提供给大家实现 
自己画的分镜表。 


两站写作 


<LD0CTYPE html PUBLIC , _-//W3C//DTD XHTML 1*0 Strict"EN" 

, '"httpj/Zwww* w3*org/TR/xht ml 1/DTD/xhtml 1-str let *dtd lf > 

<html xmlns= ,, http://www*w3*<Drg/1999/xhcmr’ xml:lang^^en 11 lang= tl en ,r > 

<head> 

<title>The Hipster InteHigencer</title> 

<meta http-equiv~ M Content-Type ,f content^^text/html; charset^utf-8 , V> 

<Xink rel= ,r stylesheet f, href= M hipster*css Tr type= ,r text/css r, media= f, screen r, /> 


</head> 

<body> 

<div id= ,r wrap f, > 

<div id= ,t header 1l > 
</div> 

<div id=’.content 1 ) 
<div id=’_main"> 
</div> 

<div id= 1, center ri > 
</div> 

<div id =t, sidebar lf > 
</div> 

</div> 

</div> 

</body> 

</hcml> 



到忘？ 涟拢到 你的 

ess 太件 f 


片。 线在釦 右珀* 
的 css f 金汫它 
们的倍 


p * 


I body f 


The H ipster CSS Fil^ */ 


} 

/* 

Add globa i rul es here 
*/ 

#wrap f 
} 


fhl 


h2 Ul, etc 


^header { 


详记 包 # 考表孕 HTMLx 件 



#content { 


暫停 f 谛劍建上®两份文件 
后再往7研泫。 


j #c °ntent #mai 


^content #c^nte r { 


现在需要一些内容, 
才能加入样式…… 


j ^content #sidebar f 
f } 
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添加少量内容 




驗 _ster 3ntdl_cer 


DAJLY HIPSTER NEWS + EVENTS 


Website copy 


In 1973^ Gary Gygax, a game designer from Lake Geneva, Wisconsin, and Don 
Kaye founded Tactical Studies Rules in order to publish the ru!es for Cavaliers 
and Round head s, a miniature war game based in the English Civil Wan \Yhik 
Cavaliers and Roundheads was the initial focus of Tacdc^l Studies Rules s 
Gygax and Kaye also wished to publish the rules for Dungeons & Dragons, 
a fantasy miniature role playing game developed by Gygax whose rules were based on 
Chainmailj a medieval miniature game developed by Gygax and Jeff Perren in 1971- 
As Cavaliers and Roundheads began generating revenue for Tactical Studies Ruks ? the 
partnership was expanded to include Dave Arneson and Brian Blumc, While Dave 
Arneson was brought into the partnership as a game designer* and left shortly thereafter, 
Brian Blumc entered as a funder- Bln me believed that Cavaliers and Roundheads was not 
generating enough revenue, and encouraged Gyga^ and Kaye to focus their efforts on 
rdeasing Dungeons & Dragons, 

There is considerable ： debate as to the contributions that Dave Arncson made to the 
initial development of Dungeons & Dragons, While Arncson has labeled himself “The 
Father of Role-playing/ 1 and has said that he was responsible for writing 



o 



un 


别担心！这篇文章已经放到网络上了 

请到 http://www-headfirstlabs.com/books/hfwd/chCn/copy-html 下我 
完整的文字，以便完成你的网站 。 
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用标记语言速立网站所用的框架后，请把主编提供给 H main " 分区的内容加 
人 HTML 页而中请记住，你可以从 Head First 网站下载所需文件. 


网站写作 



在浏览器中打开新完成的 Hipster Intelligencer 网页^它沿起来怎么样呢? 




有麵槪 


Ip ) :人们的在线阅读速度真的慢 
那么多吗？ 

答 - 真的。许多科学研究得出相同 
结论，各位也在 20 秒闽读測试中亲身 
体会了，你不也发现 : r 相同的结论吗？ 


a : 好吧，我接受这件事。但那 
两段文章看起来似乎没什么不同。 
为什么第二种文章能让我记得较多 
内容呢？ 

= 一切都要感谢 44 分段 " 
(chucking ) ,也就是把内容拆解成较 
小、校容易阅读及理斛的单位。听起 
来简单，却是让受众读到史多网站内 


容的必杀密技，我们将于接下来几页 
讨论实现方式 a 

1^1 : 你是说我也可以把这种做法 
用到我的博客上？它不仅适用于在 
线新闻和长文章？ 

答正是如此！你 T 以应用到博客 , 
或应用到其他任何要用 电脑闶 读的文 
件上。 
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长长长长长文章 



h:|p / /WWW hFKlhril 19 bJ ( bocki f lilwd/ChAptCr7/f oPV^frUIr Q.- 



£ 


兩 … •_ .这楫的彳在钱无 
f 的其该找也太 • 



fri H7i. C?ji> a pmc JL h M^nef from Lake ( Jl'i^v ： j + \ViM ： *insm. .md Don Knyc EtHinded TatlK a nl Sutdjev Rule% m 

unJcf tii piihli^i the njlcs iuid Ki<tindlt^iHS. u mintjnm: wji j>imkr bu.^j m ilic ( imJ W di. Wb][c 

C^VtiE^ri ： jnd Rotuidbcjd< t,vj.s ih^ innii] locu^ oi T±cix jI Studies Ruk^ k ttypax and Kaye also wished to publish tbC ruk£ 
ftn Dunf ； oon!t & Draj^iK a ranaty minhhiru rtik pb>inji pnw dcu'l^pcd by Gy^iu ^ host' mlc* ucrc based («i 
t ^iniiLiil. ^ mcdkvjl mLnuturv ^mc doctoppcii hy<i>gdx jrJ Jtll Pmen in I^Tl. As (Aivjlk'rs :ijuJ RnLindhiMd、htgjn 
ycucrjfmg revenue lui Tjc!jl:*iI StuJjcs Rides, [he p.imicr^hip \i\i' expanded to kkCuJc 1),ivc A meson anti IS run ntunK 
While Uavc Amc»fi wa5 bronph! into the pancncrship w i iwmc daipncr. and left ibpnly [heftier. Urbn Blumc entered 
as u ritiiJcr. Blunie bcltuvcd lhai nivulim md wa 、 n_、j rvventw. and cncaur3gi；d <iv^iv 

orni Kaye ut fsxiis iheir ivn rvkustnf! DungL'iins k [^ui ： on^ 

Then: tinnsidcrihic dcbjlc ds eo ihc c^nlnhtithinh ihdt l>a>c Am^r uude hi the imlol development uf [>un£c<m^ A, 
Dntgoni, 'Vhilc Amu^n hj» labeled hbuclf Tin ： I m uih*：f f*f Rottr~pIu\ 如 d ha yiiij Lh^L Ik w as rcsponiibk il>r wniinj ； 
ihc f unic in Ci^giix c^ntcudi sti^i he liiimcH u-js pnnwy rjqwitjbk tor thedevdopmemot Dimgc^w 次 

Dri^ntin and Antcwin^ In% nh cn>cnk uhiSc impi^mns. wascnnErihinnr.' After Tactical SunJks Rubs ivjs dis^ilvcd. und 
TSR Htibbio. Inc. w js Jiwmoj. Ameson awiiimrcd Jn receive civJic Uk hts muiLvcmcnt in the c!cu^>pmcni u( lluii^cmis 

& Drjs;uns. ^ 九 veil i> ruyiltit*; perhb conujcL 

in E47 乂 ^tkri^c highly 或 uccc^ful rcl^^cDungeons ^ Drj^ons, Don Kiyc died ot Jt stroke. The ixrjncdtite rciiiliwii 
\hj\ BhmK 1 umJ ili^ohvd Tactical ^Sutdic^ Ritks dnJ limndctE it [vm company nnmctl TSR Hohhk's. Stic. The 
nj difccTOfs iiir TNR llohhi^s. he cinHKttxJ of Bn；in Blue. tiv^. ynJ Kevin Hlursic. Bitui HlLintcV >t>un^cr 
Eu> rivcivcd 山 aro fmm Mdv \a Blutitc, Brim jml Ket m's faihci. uhi> hjd piifk ： hjM：d yhA^ in Eht Lonip^m> Bnjji Bljnx 1 
n Pne^id^m oi C npativc Altaic vvhik Kevin lilunv act^d ^ l^ciidcnt afOpcrjitons r ind Ciyga?c acted ^ the 
company 1 < Cl-O aixJ Presitfent Unlike the t'qusl pjinncr^hiri Tnii'al Sliidi^ Ruk;, Brun Blunw A: Kc^ in BIiiidc 
o^iwJ u mu^niy oi ihc ncvi c^mpnn\ \ slurcs 

[mii3]l>— TSR Huhhics, tnc. L'xp^ncmvii phenonm! in both the States ;tnd uhnmJ UEijoiiunjtcty; lEc^itc 

the liict Uui Ihc JJungcoi^ A ： Dijgum brund was ； bcvoinin ]； Elion ： anil Widely rccogm/cJ. Ihc Ulu^tc^ began 

^really ftvwexTend the company4 They iw Aflty ctnntntiu cuch ^ Kinndg,im^s and tfsvs, buf They ticgan 

Etvdivcr^ilV in rvntarkjhly untvbtcd arvas. Pt^lwp^ t}sc N>i cvkJcncc of ihi^ was »hc uirappfi^vcd jcguisjurm ofOrccufkld 
Needier omen* a nccdlcpciLni busmen owned by one oi ihc UhJHK H £ re lainIn addition, TSR Nobbier bK v^u 
a'rmiiciibly o\I'^iaiTod nraiUtii the Bluiwi ncpoiiimi runher, Kc^in Bliifiv liid mer^rima! mjtlitm 乂 “f 
co^k\ or Ik: prcvkiusK suocc^ful mult 卜 pmh Ditngeous A ； Dr^iiLins jdi aiiuic btwls, aEhii ivhidi muEd noi he sold In an 
ctfon hi nuti^jlc Qic rnoLiniing firunajl pnitiicnis. TSR llubhio. Inc il^uikiuioI m\o lour t'OEnpjtiio TSR. hu，, TSR 
Venturer TSR luicmatior^l. Jitd 1 Lntcmjnim'm. TST Inc. ciintmucdlo EixsnuliKturc ihc comfun>) tore Dtinjiconji & 
Dry|ions ruk pluying pnuhm TSR Venmr^v fucu^xl on ihc prtxJutikm nfplji%iic>aiKJ loys m Asia TSR Tnknutujnj! 
c^ 1 ' 1 nnntr-^ mrrr^r husintv：. liEStrihuimu j[id njIcs ihcfi?. Iecltimtij; jikL piiidt^utrii TSR, HrsicrtiiiJimciii, 

bttT it Ji4nK- Dungctinji A: lintmiimcm (itffHN jihiei. 

ncrutnnKiu maikcu. auch nxmc ^ cdci iSK>n. UmcnuiuicEy. ThR 
mngcoTL^ A Dnigoiuotiiimn. UfHin multi pk ^Kceuiiuti 、 Gvcj\ b ： h] KiiJ 

运个在钱瞄本 布** 长， Sfi 字太1 ||^s keep mg ftirci^n income jwyy Ihmi t'S taxation 


多？。一定有 f 十么方法订辻丈帝究 
得更 容忍凼 祺…… 



j 


fTumcv j FCMih ot fniimsirtigciiviit Kvcmimll^. biith Kcitn and 
a Tier t>cmg ^l cu^cJ torporalc tund^ and jccunmulatin^ 

fc acquisinons tn die w^kc oi tlic Blunv:^ departure from the boiird 

aiivxl pimisil cofiimt^fihe ceTtitpuny. I U\k\ eter, unbdmm 邃订吣 

tgoiiai^ns wi(]i Li>rui[ik' Williams, j fH^nnal tn^VMOf uho (iy^i\ lud 

_ hs an ottk'CR to jLquirv their nujt>r]【> vlcN ： k. When U iJ[ijiifc tiEulJy ucquiictj j 

In't!SB"fRW^fl ny7r« jittcmfvtctl to Hj\ c flic fkxhn:d illegal Um^rmn.ircly* ihc .incmpt hK ;md 

tiygn\ uyld ht> rematnm^ ^txk M 、 Vt]lmin、sind is^od l\w capiLil iti form a nvw tw,[Mny cnmk'd Nc^ Jnfintty PrvHJik'Chms 

The tlcpjmtre ul'< r> t；jx lii_m TSR Liiq^u;itil> i ts^rtiiod tile Ike of'lltcaimfun^ TSR c\[> k Eudcd mca 

such js marines, tktkin^ and cohik: book% In jdilitioii. the t：onituny rcliMsod fH>(Hi]jr m、v rolc^pLiyin^ 

nm^onLinic. Rawntifl. Forjinticii Rciilms. nml (Jfc\ !u»k + ;ilt ci which hjvc hud jn cmlutiri^ imputei un 
\hc ijhkhip ii 也 IjtkSslmpc 

l kw ci cr, the compiiin Lin,9hSc io .kJ^^E Eo (he umUnued Ir^gmcnlulitHl ol [he Ljhlctop RPLi cunummElv as nesv 
pioOucii were rck^cd by other ton'tpames. Jn addition, m im crtortio compete uitiic enKrscm collectible c^d pm: 
nurkitH TSR released [e series urprinJufis. stich :i^ Dra^in Dko 5nul Spclllla 1 . which -imply did <11 The cki\Miunrd 
tli^ncinl >p\tul wva^ ajipruvai^l tiy ihc fuel tH.it. js Ihcir pnnliKt、tinmnued u> pcitonn ^Ktflv m ihi^ uuiictpbcc. TSK 
t*c^Lh k> atucL ihi^t u r lxi i( bdic^cd lAlcini'cd un ilv m9i：IJcctuil pruperu. Tlic uugc^ ot'chc^: k^\ iekIuJcJ 

nat onh ^Jicr coqwrin^n^ and hustnewe^. hut indLvidunU \Am mvoKod in amiwrin^ i'jh tkiic^n anJ mr】ran rmxlulct 
The n:?iiOi itf'lhcs^ actinni ihut TSR was w pcrrci^cd dingily iiu^ckinj ： ii 、 ai^inmi'T'* 

\n [0^7. TSR uppn^khcii ihc compjtsy And nlhif it^ in tell cclunl jmkpcrt> were acqitinjd by Wi/yfxlv hiTltic 

C_i_m jmniL'iilK, VS r t/xmk [he t ivist. \\liu i h ms u uk m l\ ciTnmdtrciJ in lit due picamncnt Uihkmp mlc ptiyiny 
totitpjny hitd been icstpumibk lor 叫 bluhinp Mavit The iijEhcnni：. die ^iuik %vho,M ； icnmkjbk smvea hjd been 
mpontiMe for TSR^ (Mhtt inih^ cflllcciibk' cord gww imrici A to ihtf uk la Wb^ntk iifthc ('natr which coiuinu^ tn 
publish l>tui^ciirti A: Drj^ms ut ihh TSR wj> islow ly di^Jiuntted \n 2W5 ihc lln.il TSR inTiicmcirk^ wltl' uilkuvcil rn 

CX piFi*h> W I/AT(J4 n ■■山 c 【 oasi 

t>c^pitc its ulmo^ conM4iis k^l anj j'tiunc^] tioiaHc^, TSK hid j l^iin^ impjaun Ih^Ui Je^iejI mui ^jci^Onc 

cm Ely ^r^uc ilut TSiK tub bd more imp^CE on ihc cntcrtiiruium giinc indusU) idi^Eor Eio^d^iyUthan any other 
conipjny in (he hi>vir> Ntii onlv arv [tuny c^mpuier role plnyan^ haxxl on ihc iirchv'typs^ jnd iiicdmk 、 

lii^>t min>iiuLCil u) Dunj；LHifls K F>rjgtnis lm\ numv ot Ihc iLiniinjiiL 1 ^ m ihc htvtiw> "l ihpitLil ^ jjrtMiiv iriHLicri'cil 

hy TSR 3ndn» various products TSJVs fwoduce have kmu since pa^od uitu the realm of j^ipulurtulciiTv 

Founded m 1^ 7 J b> Udi\ U}jja\ ind Dmi K^yc ^ m\ c^cntuji] Lu pubEi.^u and (JnUibuif the r\ik a > o[ Dunjdct-ui& 
& TSR went ro hcconw anc kil'llic rnofl n^iew^nhy in ihc cnicnjirmvnf LnJtuir% W hire 

Dunjs?iins ^ t>rjj ； L 、 n、went on Ki ha^c a iMnp imjvict nil J>oih digital aru! niin-di^iial jzimid TSR j 、a 

curpi>i,j[e cnm>. periupv hcii krun\n fur ik lln.tncul uln ：^ iimj itie contl m fh,u met inuurshtp oi the 

Lonipjjiy ^jhi its intcikvLLul pjopn ； riy. 


天娜， 俅者考漳 
刼条表云的网 (毋 
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网站写作 


改善沟容的倒金字塔法 

没有儿个人愿意滚动浏览器的窗口來査符打开网页时看不到的 
信息。即使你的用户 E 想拉动窗口滚动条，大多数人还是根据网 
页加 栽后最初呈现在浏览器窗口中的内容来决定是否继续读完网 

为此，我们应该采用倒金字塔法 (inverted pyramid ) 架构文贲。 
先写出简短的结论，以便用户快速掌捏网页的主旨，然后再加人 
细节信息。这样，用户可以随时停止阅读，但又确定已经读到了 
茁要的信息片段， 

，-重裳的部分兹存丈章场鐘。用 
户应磧只虔阅读弟一歿，漱浇知遂 
整荽走 耷的主 若。 



主襄标题 


小段主体文字为用户提供本文的来龙去脉，并简短 
介绍网页内容 a 



■ 


■ 


可能存几个列表项 
用于特别强调 


_ 


某些网页内容 


其他标翅 

继续更多主体文字，提 
供更多网页内容的 
细节。 

以此类 
推…… 




起往下内容起不重龙，作仍《 
符合电耔写作的规笵 & 对子用 
气理鹌 if 圭 fe # 不兵從的事 
场.即9兹在比技 T ® 的 地方, 
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练习倒金宇塔法写作 



泠颺 


下面有两篇文章。一篇使用了倒金字塔法写作，另_篇则没有0请阅读这两篇文章, 
并在觉得掌握文章主旨时停止。 


o 


Avalon Hill, now owned hy Hasbro nnd operating as a division of Wizards of the Coast, 
was a tabletop game company specializing in war games and strategic board games. They 
were not only responsible for pioneering many of the key concepts of modern tnbletop 
wargaming—such as the hex grid and xoncs of control—they were also responsible for 
publishing some of the mosi recognisable titles in the board game industry such as 
Civilization, Axis and Allies^ Rune^ucs% and Dune, 


In 1958, Charles Roberts founded Avalon Hill in order to capitalize on the success of his 
game Tactics. Self-published in 1952, Tactics was particularly noteworthy because it was 
based on actual war tactics and scenarios- As such, Tactics is considered to be the first 
modern tabletop war game. Shortly after the company was founded, it released Tactics 
II， the sequel to Roberts’ original game* Shortly after the release of Tactics II， Avalon Hill 
published Gettysburg, which is widely considered to be the first tabletop wargatne based 
upon an actual historical battle. 


Avalon Hill enjoyed moderate growth through the 1980s and early 1990s. However，during 
the mid 1990s t the board game industry as a whole began suffering a downturn in sales. 
Not only had overall sales of their board games decreased, but the company had also lost 
the rights to two of their most popular games，Civilization and 1830, in n legal battle with 
the computer game publisher Microprosc^ in the summer of 1998, Eric Dott, president of 
Monarch Avalon, Inc (the parent company of Avalon Hill), sold the rights to all Avalon 
Hill titles，all back stock, and the name company itself to Hasbro, Inc, Hasbro continued 
to publish games under the Avalon Hill name. In kte 1999, Avalon Hill was made a 
division of Wizards of the Coast, who had been purchased by Hasbro earlier that year, 

W izards of the Coast continues to release games under the Avalon Hill name，including 
Axis & Allies^ Betrayal at House on the Hill, RoboRally, and Risk 2210 A.D* 
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网站写作 


Warhammer, which is currently in its 7th edidon, is played using player-selected armies of 25 
mm ■ 28 mm plastic or metal miniatures* The game rules (as well as storyworld material) arc 
published and released in a series of books (some of which ate core to gameplay, while some 
of which are supplementary). The gatne itself is generally played on a surface, the standard 
size of which is 4x6 feet While the game can be pJaycd with just the miniatures，players will 
often use modd s«nery> such as trees, buildings, and topography, in order to add realism and 
depth to their game. Each unit (cither a single miniature or a group of mifiiaturcs) has a point 
vjiluc based on their power or skills. Players build (or "draft 1 ") an army based on an overall 
point value set by the game type. For instance, a 700 point game means that each player cart 
build an army totally 700 points or less- Mo^^ment across the playing surface, which is turn- 
based, is measured in inches and combat between units is accompli shed through use of six- 
si tied dice. Victory in Warhammcr is most often determined by victory points，which earned by 
killing enemy units and meeting scenario based special objectives. 

ft*s important to note that Warhammcr is not a collecdbk game. As a result, miniatures arc not 
sold using a closed-box, random model Players simply pick and choose the miniatures they 
want to have in their armies, and buy them individual!v or in large sets. It is also important 
to note that Warliammer miniatures do not come pre-paimed* It is the responsibility of the 
player to paint their own miniatures. As such Warhammer is somewhat of a niche product as 
it requires specialized skills to fully experience the game. In addition, unlike other pre-painrec! 
tnbletop miniature games, such as WixKids^ HeroClix^ Wizards of the Coasts Star Wars 
Miniatures, or Fantasy Flights Games’ Mutant Chronicles CMG^ the Warhammcr community 
has a unique system (which is both formal and informal) that recognizes particularly talented 
mini attire pointers. Generally speaking, Warhammcr is most commonly played in game scores, 
hobby stores, and comic stores. In addition. Games Workshop organizes a Grant Tournament 
season each year in which players compete against one another for community-wide 
recognition and prices. 



嘟一篇 更容易阅读？ 

你能识别出使用了倒金字塔法的文章吗？ 

你认为倒金字塔法为何能使文章更容易阅读 ? 
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哪一种才是（倒金字塔法）？ 



3 瘅蘚答 


各位已经阅读了两篇文章，并在觉得掌握文章主旨时停下，哪一篇让你很快停止阅 
读？让我们看看这两篇文适的第一段开 始处： 

文章 © 采用了倒金字塔法写作。 



Avalon Hill, now owned by Hasbro and operating as a 
division of Wizards of the Coast, was n tabletop game 
company specializing in war games and strategic 
board games. They were not only responsible 
for pioneering many of the key concepts of 
modern tabletop wargaming—such as the 
hex grid and zones of control-chey 
wore also responsible for publishing 
some of the most recognizable 
titles in the board game 
ndustry such as 
Civilization, Axis and 
Allies, Runequest, 
and Dune* 




s 知迮许多兵子这荔亡 


o 


Warhammer, which is currently [n its 7th edition^ is played using player-selected armies 
25 mm - 28 mm plastic or metal minktures. The gstmc ： rules (as well as storj'world 
广 ' material) arc published and released in a series of books (some of which are core to 
f gameplay, while some of which arc supplementary). 


采用制舍 f 侈注， 。 u 荔沒冇 
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文索冰箱磁银 

使用倒金字塔法 m 新组织主编提供的文案 （⑺ py > 片段 
i 己得把砧茁要的信息放在敁顶端 5 



Despite the restructuring, TSR, Inc* continued to lose money as a result of mismanagement. 
Eventually, both Kevin and Brian Blumc were removed from the board of directors after 
being accused of misusing corporate funds and accumuhring large debt in the pursuit of 
unapproved and inappropriate acquisitions* In the wake of the Blumes^ departure from 
the board of directors，Gygax assumed the role of CEO and regained partial control of 
the company* However, unbeknownst to Gygax, Kevin and Brian Blumc were in secret 
negotiations with Lorminc Williams, a potential investor who Gygax had brought into the 
company previously as an officer, to acquire their majority stock … 

_ -- — ^riencctl p^nomeaal success in ns brand was 

utially, TSR Herbies, Inc. fac t that the greatly overextend 

二:藏 SE 士二二工…一 

^vned by one of the Blu me ? s the company was unable to adapt to the continued fragmentation of the tabletop 

W RPG community as new products were released by other companies, in addition, in rtJ 

effort m compete in the emergent collectible card game market, TSR released n series 
products, such as Dragon Dice and Spell fire, which simply did not sell … 

•--l Sadies Rules ^^Whilc Caveliers and Roundhc.ds was the initial focus of 
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倒金字塔型的内容 




the company was unable to adapt to the continued fragmentation of the mblctop RPG 
community as new products were released by other companies. In addition, m an effort 
to compete in the emergent coltectiblc card game market, TSR released a series of 
produces,, such as Dragon Dice and Spellfirc, which simply did not scIL. 


砑桕读的网站文案 

以倒金字嗒法安排内容顺序 
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文察冰箱磁银蘚答 

各位已经使用倒金字塔法 31 新组织了主编提供的文案。 
你觉得用户对下列文窣会有什么反 应？ 
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Despite the restructuring, TSR, Inc. continued to lose money as a result of mismanagement, 
F.ventualK; both Kevin and Brian Blumc were removed from the board of directors ^fter 
being accused of misusing corporate funds and accumulating large debt in the pursuit of 
unapproved and inappropriate acquisitions. In the wake of the BIumcs , departure from 
the bonrd of directors, Gyg^x assumed the role of CEO and regained partial control of 
the company. However, unbeknownst to Gygax t Kevin and Brian Blumc were in sccrcc 
negotiations with Lorraine Williams, a potential investor who C^ygax had brought into the 
company previously sis an officer, to acquire their majority stock... 
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网站写作 


压缩文索 

使文章在网络上更具亲和力的最简单方式之一就是移除不需要的内容 a 如果你的 
文字淸晰简洁.能让用户用于阅读的时间减少，他们也会更高兴。 ^ 

什么是写得较少又能保持文章 m 要内容的最佳方式呢？此时要錤仔细的编辑工作。 
使用简短的词及短语快速指出 m 点，并以两句或三句组成一个段落。 

减少副词的使用（副词是其他词的变体，通常以 “- ly ” 结尾，中文的副词通常 
以地”结尾，例如 big moose, 一头真正地大糜鹿 ) ，并以主动动词 
替换被动动词（例如 brain was hydrated by eight g 1 a3ater-a day ” ，改 
成 “hydrate your brain with eight glasses of water daily 1 * ) 0 各位将发现， 一 篇有意 
义的改写后的文案可以比原文少用很多词^ 

完成这项工作后，再读 ( re - reading ) 一次 你的改写版。如果你自己都搞不馑文章 
在说什么，怎么可以期盼用户能理解呢？ 


历户不会知遂原@任 



豇笔 上阵 


请把主编交给你的文章（如下所示）缩编成较短的版本。 


全盘请 g http,// 

com/book^/htwd/ 

chOl/copy^edited * 
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In 1973 ? Gary Gygax s a game designer from Lake Geneva, Wisconsin ? and Don 
Kaye founded Tactical Studies Rules in order to publish the rules for Cavaliers and 
Roundheads, a miniature war game based in the English Civil War. While Cavaliers 
and Roundheads was the initial focus of Tactical Studies Rules, Gygax and Kaye also 
wished to publish the rules for Dungeons & Dragons，a fantasy miniature role playing 
game developed by Gygax whose rules were based on ChainmaU, a medieval miniaturo 
game dcvcloppcd by Gygax and Jeff Perren in 1971, As Cavaliers and Roundheads 
began generating revenue for Tactical Studies Rules, the partnership was expanded to 
include Dave Arneson and Brian Blumc. While Dave Arncson was brought into die 
partenership as a game designer, and left shortly thereafter Brian Blume entered as 
a funden Btumc believed that Cavaliers and Roundheads was not generating enough 
revenue, and encouraged Gygax and Kaye to focus their efforts on releasing Dungeons 
& Dragons, 

There is considerable debate as lo the comri but ions that Da\ f e Arncson made to the 
initial development of Dungeons & Dragons. While Arncson has labeled himsdf “The 
Father of Role-playing/ 1 and has said that he was responsible for writing the 
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网站写作 



:如果人们不喜欢在网络上阅 
读，为什么还要仔细编辑这些文章？大家 
不会直接打印出来惽慢看吗？ 

没错.有些用户会打印円页作为日后的 
参考资料，但请想想我们使用网站的方式。你 
最近一次打印网页是多久前的事？大多数网络 
冲浪者的重点是求取速成答案，所以提供阋读 
速度快的文章才有回报。 

n :等一下，这样不是反而减少了用户 
呆在我的网站的时间吗？ 

说实话，不会减少，没错，偶尔上网寻 
找特定信息的浏 I 者的确会认真阅读网页，然 
后就此再见，不再回来，但优秀的内容可吸引 
主要用户，一旦用户被吸引，你就可以端上史 
多内容.附带仔细安排的相关文章链接 & 

. 关于倒金字塔法……我该如何从内容 
中挑选出最重要的部分在_般性介绍后呈 
现呢？ 

答 I 这个问题没有绝对不变的铁則 & 如果由 
你编写内容，你应该清楚知道想让读者记得的 


要点 I 如果是其他人交给你的 
内容，请仔细阅读全文，着着能否找出文章主 

R ： 如果我的内容依重要性排序，该如何 
判断停止的时机呢？ 

这个痳.如果有一段内容已经距离重点 
非常远，远到你不确定是否该包括它，这大板 
就是舍弃这段内容的提示信号了当然，如果 
你还是无法确定，请先把自己当成用户 t 想象 
你在阅读这段文章，最后一段的详細信息是否 
有助于理解文章的主 s 呢？如果已经没 有什么 
帮助.下一步就很明昱了……琍了它！ 

1^1:编辑文章时，我该移除多少内容？ 
你们做了一些我根本没想到的改变…… 

这个问题没有完美解答，忸如果遵守以 
两三句构成一段并琍除背字的原则，各位将发 
现文章显著地变短。大杈减少为原文的80%, 

熟能生巧，但多看看性项相似的网站并比较它 
们的写作风格，你会从中学到不少 4 如果你记 
得这呰原則，极可能已经看出其他网站的内容 
该如何修改了6 

倒金字塔法与丈牽编辑都蛋 
很实 ffi 的工異，佴重读也一 
样重要。结東编铒后，爯揉 
-邊改®后的丈牽，栓壷是歪 
能爯拿梓一些沟容。 
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试驾 


mm - 

更新你的 XHTML , i 上它只 包含经过各位巧手编钳后的内容。让我们 
再放到浏览器中测试一下……我们距离目标近些了吗? 
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f 如何着手修改？ 

你是一名 N 站用户。其他网站如 
M 拆解内游并让内容更易控制？ 
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网站写作 




^nk 



Jim ： 为什么?为什么这招会有用?难道列表不过只是一堆苌度不同的文字 
片段，可供用户的眼暗拍读而已？ 

Frank ： 列表将大块文京拆解成为用户更杏妨阅读的小块 倍息。 对用户的眼 
睛而言，列表也提供了扫读时可以锁定的「=1标 5 我示范一下列去的工作方 
式。这 M 先写下一段文卞，然后再示范如何拆解成列表。 

列表对于拆解文宇以及让网页内容更具可扫读性有着良好的成效。 
列表可以拆解似乎藏有许多列表项的段落，甚至可以把长段落分解 
成较小的块，实际建 立一份 内容分段列表《列表可用在主要内容主 
体、侧栏、导航、表单，几乎可用于网页的任何地方。 


3im 


Jim ： 这还不错， 打的 。就像 
把 m m 要的佶息放在敁前而。 


篇关于列衷的文帘首段,使用倒金卞塔法， 


Frank :嘿嘿嘿！你知逬的，我认真地学的！无论如何，就像 你讲的 ，这 
篇文章不算差。 m 扫谈它的速度还能更快，如果用…… 


Jim ： ……如果用列表吗? 
Frank ： 对啦!就像 这样: 


列表的使用 时机: 


■ 

■ 



需要使文章具可扫读性时 

段落或句子具有 H 可列”顼时 

大型文字块可被分成_或两句组成的小块时 

k 简洁^这份列表把你的文贲槪要成三个句子. m 文章的其他部分 


丈聋分錡威? *) 表，巧 怎么办？ 

一继 续写】 



列表可在网站中用于各种用途。试着在下列情况使用 列表: 
■ 你的主要内容 


■ 侧栏 


■ 导航与标题 
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倒金字塔法与列表的在线观察 


篇习越 


请访问下列网站并于这些屏幕截图旁写下笔记。哪些网站使用了倒金字塔法? 
你觉得为何有些网站不采用倒金字塔法？是否有任何网站采用了列表与项目符 
号？ 为什么（或为何不采用）？ 
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网站写作 
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各个网站采用的方式 






长篇习翅 
蘚答 


■-B 


，I 

P --A ■，■ 


I* 


4(* : 


digg.eow 


以上基裁们的解苓 a 伢的谷索或锊有 
点不同,住釦菜鸟我们的爸 f 老异太 
大，详爲次沄问这签网玷， 


哪些网站使用了倒金宇塔法？你觉得为何有些网站不采用倒金字塔法？是否有 
任何网站采用了列表与项目符号？为什么 （或为 何不采用）？ 


SUshdpt 与 Netvsiine 里现沟容给用户 
吋部朵用制舍 f 侈法 
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t 采用的场0符咢 
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网站写作 



磨笔上脖 


以下是已经编 辑过的 文案，原姶版本由主编提供，现在 m 把 
它改写成更容易阅读的列表， 

提示；可以先用一或两句解释列表的内容。 


The departure of Gygax from TSR irreparably changed the face of the company, TSR 
successfully expanded into areas such as magazines, paperback fiction, and comic 
books. In addirion, the company released popular new role-playing settings including 
Dragonlancc, Ravenloft, Forgotten Realms, and Greyha'vk，all of which have had an 
enduring impact on the tabletop role playing landscape* 



糾_砝祕的气短； 把这 
级 i 穹破另威利表爯沒° 
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列出好主意1, 2, 3 



磨笔上陈 
薅答 


各位把经过编钳的文章改写成列表， U : 它读起来更轻松。保 
留一或两句解释列表的内容，有助干提供背银知识。 


The departure of Gygax from TSR irreparably changed the face of the company, TSR 
successfully expanded into areas such as magazines, paperback fiction，and comk 
books. In addition, the company released popular new role-playing settings including 
Dragonlancc, Ravenloft, Forgotten Realms, and Greyhawk, all of which have had an 
enduring impact on the tabletop roleplaying landscape. 



硪沒意各个列表窃 
的 •)_ 狻句子 、 g 
#列表茲供 J 好景 


这段内容3绍值用5制食字烙法（最 
重要的内容先出现），现存則进一步 


The departure of &ygax from TSR irreparably changed the face of the 
company. TSR successfully expanded into areas such as: 



Magazines 
Paperback fetion 
Comte books 


-tf- 


的苐—个宇咨郝用犬写。 



tn addition, the company released popular new role - playing settings 


ineluding: 

■ Pragonlanee 
* Ravewloft 


_ 


« 


蔌们用子釗連列表的内容 3 经 
列出好几场，所 以它很 遠合必 

Forgotten Realms 冬~一 刊表？ 
frreyhawk 


r 


All of these have had an enduring impact on the tabletop roleplaying 
landseape. 


圣后一句 t 龙编鞀 
毕 竞它现 4 出现在 


可扫读的网站文案 







以倒金字塔法安排内容顺序 


经过缩短长度的编辑过程 
进一步把内容分解成列衷 
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网站写作 


在 XHTML 里加入列表 

继续编辑 宂他 文萌，在合适的地方加上列表。完成后，情 
将 XHTML 修改为运用列表的版本。"『以使用无序或冇序列表, 
内容可加上项3符号或编号， 

无序列表 



有序列表 


* Home 

* Blog 

* Portfolio 


<p>Hy favorite Seinfeld episodes</p> 
'<ul> 


<li>The Chinese Restaurant</li> 


<1i>The Pe 2 Dispenser</li> 
<li>The Yada Yada</li> 


<1 i>The Junior Mint</l.i> 


<li>The Big Salad</li> 

<li>The Fuscilli Jerry</li> 
<Xi>The Rye</li> 

<1i>The Merv Griffin Show</li> 


</al> 


<p>Top 10 reasons to move to Chicago</p> 

<ol> 

<li>Lake Michigan</Ii> 

<li>The ,T Chicago^stlyG ,r hot dog</Ii> 

<ii>The 

<1i>Millenium Park</li> 

<li>Wrigl^y Field (even if you don r t like the 
<ii>The Bean</li> 

<Ii>The Sears Tower</li> 

<li>Really Deep-dish Pizza</li> 

<1i>The Midwest accent</li> 

<1i>intelligentsia Coffee</li> 

</ol> 



❹ o _ ■ _ : ___ / '■ - 丄 

1 见间 何 


-^ L 


’ ' ■■I.!' _ ■ ■ ■ 

'f- n 




Top 10 reasons to move to Chicago 

L Lake Michigan 

2* The ^Chicaeo-sifvc" hot dog 

3, The Er 

4, Milknium Park 

5 . Wriglcy FicJd (even if you don’t like the cubs) 
6, The Bean 
1 ‘ The Scars Tower 

5, Really Dccp^dfeh Pizza 

9. The Midwest accent 

10, Intel ligenisia CotTce 
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各位已经对文章应用了倒金字塔法，进 n 了一些编辑，现在又 
加上 r 列表。网站濟起来如何？ 


我 fD 的 XHT 帆加上列表后的样么 

f |) http ：/ /# uww , headUistUbs \ com / 

& ^hs/hi^d/ch01 /cop^edaedjists 

心 mf 欢看。 *■ ' 





Htpstet intelli^ncet 的 55 2 部差确 
钕#泛案的外观？ 


1^ no 

Thf E?f 

li 

lUAilSJlSJ JJ 

1. hap } /MM.htnUSnrulkbi ccNn.'bQKAi^firwtf ^tupr#p t „rdir«d. -ici Nnri 

A 1 


l^f : 奶 》 r li:try 4i>p±v ^TkJ [Km kMink 1 !] IKbL'dl Sfjt!ic> Itulo i I !i>puhta>li tii? lix t j 、 jIkd x>tl KtiMindhcaJ^, a ;jmc n (Tv t RfIm.mJ War 

v>& BtninjhcjJt wjrtihf ritftil iixtii Hi fSR- jjuJ N 外 f iin- wrJicij &：i e|k ivk> t-r j iv4: pbymi c*flv *k^cV"VViJ h 

<t>f» \\ O'jbctv jnJ bcean fcrwralnf mtlwc Si¥ ISK. lb? » “funJoJ ncluik 1 1'i' c Amc^io jnd lirun Uk^n? DitiC ■加 w\V> 

thtfunncv^i 申 】 b J fjfik ： Nit H whilt Ucua Elkaav vn^TUil j Eunin ElUcnc tvIkc^cJ Ail t'i' 】 U ： i> jnd Rnruntihi；^' nut ;mrrjl»£ fTh^j^ lOffHK, 

jo! pzi •mi K j>€ h' k<M\ ilvf frK-r&^ni tck'^nr^ 


[n rhn ^>c4 »•( 4 T^< mnvOuic rc^uh 


JrtVt'Ti M T、R Hot^Kv 


itiiLc The k 

V “咖 城 


iifDliwi nk?lh\ Lii ： 


Tlliirvv jfA ( 山叫 I、 cO T^R 

K «rt Pt n tpmc 


Rolfv m fPf h ， lf ： rK^ Mlkmt 


itm 




rH^i ^N^Miuei% fun^u |%R, 1 ( 1 ^ 1 ^, (fn 


i fH* SLijJy t'l 


t nW^ Uk c^ul {wmorvti^ vf TSK. Iwnhci^ Wma joJ Kcun<™ wJ j ^1 iJk 

TSR lot t^pcrtrrhvJ pft^wrxT^uil 叫 1 «、_ rt h.Hh Che I fiPioJ jAJ duf flwr lltjrTc' tV^^ili m ciVxkTkl UV fieJtH TTto rt^fJ irJo 

JifrunN «4H：h A* K'utkrO^Anx^ jaJ ( 1 ^ 、 aaJ h^iri I 动 dAtTiih nki unncUl<vJ jtti. TIk IvJ oi tht^ ^ k« dv Liruppnn'c^ Jt ； qu^Kh>n i^l i t rcvnl r ； IlE N tflvn. j 

*nfcW^trt L>ACu|lfw ffbfl^ % ho. KOW KkS pnittfij nbUtXl、-■ f iopocvuj Ejic [W o rtfcj t Jufi^furtfc 汉 

cnEunc Kx4.% vn hh h ^utiktei'l Nc 

bi m c In rvuli|[AJ>c (hf limr^ul ptvihknb, TSR Mi^ik^ Eix u» mtUL*l4ieic^l mki rixji tiinpjKK 1 % (Hut hvLLvM^j ivi iLCl^mt irtin 

r^ii- 

nvkicwcJ hiflusiulvtu/f ^tw DiinfCurnt n.^ j>b^rif |x , *. i J jtti 

TSR. VcntufTP 

1 ikcti^AJ umi 13k hm 411 A.id n Atu 

TSR kwmjcrtyl 

1 .%t>Mhhnl h> nufu-f ^ 


■ In 

• rh^yj^tjivi 




l r fiJmnjiuvS, IsH \ flrwiasinwnV^ ncih u 也 】n Ip 

L«piny t^nt^n KXt,>nv jk ji Enxit L ; !s 

Af tf^tfixcjnn^ TSH, Inc “wlnu^J k 、 

^v)i]b AnJ Mcinulanrig ikfc( n (hf furvjK k 

tviartl ^1 gJrt *vt 的 icid thf rolcoM 

^ iHumn j r^4cnluj n^c;4rt 4iy^A^. tkiJ 
CimTutlfhf Vi4kr Kt^K (ixnniKi'. l'*\^ q»s bn 
Lvm j nc* (4)n^p^i> Nt> I si ITiriCS h\xhx~Cu? 

Tiic-rfcvciiiLire i，n fiT lanti TSU. (h4npe^l 


CS. 4 J^(n£t(on (tVc, <dl>, f*j 
达请鸟 II 定义， fSi ^ f 用子 f 
现®家射公司双 S 们的贵 ft 


ISSU wffuwwni 

Kc^HYUAk fitf tv CfljTA^ T SR\ [P ■) L^tbcf n>VtULftntffll ULtfbctV MKh ■! nhn nhj IWkii hki|> 


tlju*vcf [lif WTwatf were UIl^ic^ ^empt 


ani ItruLi Elhinv i>f mm^inj LorpxsHf 

tH^rJ i^t drtuo Alio Cw hb^s^'JfjMmff ftvftt ih* 

LLD Hlu.'w iihfnp w\ KL'irt ni^iXuChm^ 隹 il£i Lomxif 

!i\k Whn> VVj|kirri4 tlruEK 叫 yroJiJK 
iU \m rccTuin.ni U> WilLurn unJ uwJ die irjptU] h 卜 


WCjLl 似 h 取 


* llriwtM jn Pvnkhw m t jcanic MUW'- 

* Kevin wit Pn^fck*nt 

«_ (i> ^[Li u u nc^ OHUfUfiyS l'[；(l vkt PtryiVof 


,Pjrw^lutrtL 


Pj|^ilu：h fKtibVi 


In hUfii«L {KTHibt tKi* M 


• Rj^fnh^ft 

.hiKjHn^ RfJfcm 

Fuic hjd 3? 


\i\oi 


Fuiiir hu 3n 


if 


Mart . WiJaftJtfiHfK l iSId. hjd 

.lb: ftnJ UJint RiAfkrt. ACkrtlw sjk L . TSR ^ j ： 
% u putviiJi ^ Dri^uD» to cfais 


[a tw 


TiR. jnrvx'Lh ； hs*J npc™ mhp, 1 


fvMvhftl TwC-JihCflAf. dhf fUC 

iV™ih dwntltfil l»i Wi/jfJ' i-if tbi 


W \i\ jJnk>j K$^ Ml imix'i 

oilcYtuimcni 資 MiU iNifi 

uiirLO^Pil n Du^cctH» Si Dnpocm. bu! TSR 
fK4Vbf (.utiu^ 


(MUU SipK. CUf I 

^ h* 如 Oft [he 饥 

luve tviz 


ISK 




Cl^WtiXl EtMT 

die v^i nw; h*n*fi iW 

c l>Vi£ >k^c^ iU^hoJ r/rLN [ht ^ciVn irl 
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产 

标题让文章衫锿 

前面用了列表把-搜段落和句户分解为列表项，但是还冇什么方 
式能帮助用 A 灼读内容呢?标题 ( heading ) 是一个让文章区域更 
具吋扫读性的好方法。 

标题把大块义 G 分解为豇易棠撺的小块，而 a 贷告了这块文卞的 
摘要——可 LH 用户决定是否投人时_继续往下阅读。 


网站写作 



》娌 


以下是 New Yorker 的主页 （ www . newyorkercom ) 
慢慢来，不要遗漏。 


Q 


请圈出所有标题与列表。 


#00 


The New Yorkjer 


[■< j ► l [ C ] \^\ ( + hirp fi www . n « wy ^ fktr.COflV 



-： 





THE NLW YORKER 


-iEF r3^ U_ 


r,|H B , 


nr 




： r B J .v i f-L.-R 

* 11 : a PT^^.rr.T-avr. 



UtOlTlwO 





V i 、1 MMP - ^ w m 
IMf Q AMI 

TRAIL 

IInT ： !/NP|r t-1 jm : iiia |h^r 

fuM li\ \fi j 

n |Vni irv^m 


AKU BV1 I vvfV iva>c H _l 】 rx. Hcr>il rtvw . 


tlitCH 



BLOGS 


wiS.fvnrvff t"ifu < 

iIk J ^：tta i 1 ^ 卩 

\ lnt * i # i * nkrraopmf * 

A IliJU J Ntn 匕 f'^- Mlii \l4th \.\ 

Ilk.lv 1WU Mli 



稻 a ^ ca ND 


TA.^tf CF COfsTC r^T?l 

fhr 、 i* ， l‘ftlllti ]Ulh- 3MIK l,>C \ri J-ir t|T 

MOT；? rof'ujy 

limJ lUm&ivL A nub_D m ; 也 ISjSI ■'V'Nriv 
Mlkdtm d IpfLLiEi^R )； Lhsilkh inLlt ： 

l ^ndl» q S±fih ^tiu. L \V\ixt|di^i.»p it t^nji 


PKilK^R TN£ 

WlO RiVM CK THE POL l*lts OF fiACC 

KH + i&t^G fH£L llJO KUN 
R>AML!2A tNf ■ USANCE lifKATFGV 
SLOE 5hO.V VRhONS Of 0-BAL 1 ^ 


CARTOONS 

Sttk Sinrt^ ffi'in 


Tcft-nmAJ ^It^lU^IKMLk <lf UJhiJfN 

TI* CA'^-AICJ* ri^AiL 

rv \^n' : 加 , ， kUt\ 


IUF 

fh*Tt K - 


Iff^drtL lltny^rrs 

r-^ii.h.'i phn r'riif-ipf.'ft-- or 

上 I 」 it^'n N ： t：hi 

lmmr* Sumnif^M ir 

v；n Ti'iLi; \s.hHiKj iih 

Hip£cf Iti ge li l—U %K m n\ 
l.iw-'-' il Jp. i^r th-. Li.n ? Lti .* 
fi-^likl !eEi!l 

r t_i-Kl> F lt i 
•Ktiiii * > h h 1 l^n< 


! : ,*v!PAUA : KA 

I lit: b'W.i. 

E * = Mf：ii 


■nf.ii \ U < 


上 , Kv 


1IIK C ANDIDA? h 

卜 v VViEli if;i h ;n nc>-j j» 

\ c' I>hjr-- !P>'r 

Z<x^. 


f. I & „ l ； K：-H 

SttKhl MI SW 

b\ 1 utrrn (t'l[ni> 
ir lh^: vt_rd 


inirf ! 

DA S 


^if 


JT 5 0 F THE 


CkC_ AfV 


tKmgu 




•* 1 

,v 


11 > . 




■ 


鼸， 










4 





■*#r 


jnKL 


< 


m - 'i 


■ 




s r - 


"T* * j 


^Cip 

!>_■，- 


■ 
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找出标题与列表 


+ 

& 3 ■哫 

蚪驾 
' &) 
iSx m 

2 S 


MaJ 


啉玫迪、改 

s £ &htsa 

s ^' 媒咖 

妙芸§ 

^33 




* 


Is 枭 .； i 睐塗 
:^沄祛溶 

鈦 3- 将笨翁 



i 

I 


\ IL ^ __ 



^3y ^00 


外峰！加鉍吟 /St 油 
贫您办芝4。 


况 1-> £H 取艺 >■ 
跦 m 掛龙 谢胙 .汝 
加 SW * 怫毖钕。 


仲 {_ 冱饵 - a -^ s 功 

汾迓士冷 tis 刼■加猫 

…： . 


; lil©bo 
料。 


->贫尚改紅 IJ 



s$ 


苕谋圧茚谢茆豳 aJT ? lj 谢7届？ 


m - ilafeal : ■顔 Mr 洚旮盼 — 55- 凇冰尚这鉍 
f ? 一蝴啟 扭弈* Hi * 翊积汰 J -}( a : 關弟 
浣 s ^ s 埤啪妒 f ^ 


cis ^ m 私屮杂 草作 • 
Autv 。 _课谇掛热03舶. 
芘明沸&-今艺作。 


F 

T 

« 

□ 

o 

1 


1 

E 

f 

i- 

1. 

1 

¥ 

j g* 

I 

!! 

i 

3 

s. 


1 


■ 



? 

\ 

i 

■1 


i 

f\ 

11 - 

I 

|P« r | 


h 

SlK 

、 

一 


i 
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网站写作 


知道标题的重要性后（以及如何制作好标 题）， 我们来尝试标题写作 

为以下每_段文章想个标题。记得要写出直击重点而且易于扫读的标 
题。 


Acoustic guitars are used in a variety of different genres 
across the globe. Because of the long history of the 
acoustic guitar, there are many different kinds; some 
kinds arc rarely considered guitars, such as the ukulele, 
which was based on the four-stringed braginho or 
cavatjuinhos from Portugal 


The Protestant movement may have commenced earlier, 
but the publication of Ninety-Five Theses by Martin 
Luther in 1517 spurred on the revolution within the 
Church. Luther attacked the Church's theology, which, 
he bdicvedj misrepresented the Bible and placed too 
much authority in the hands of che clergy，and wished to 
reform the Church, After being excommunicated, Luther 
published many books on Reform. Luther's works were 
most influential in Germany and Scandinavia, 


The surface of Mars is a lot like a desert on Earth; it 
is very cirj r and dusty, but it is also very cold. There 
are a lot of loose rocks and dunes of fine sand. Crater 
impacts mark the surfacCj but these are not as common 
as or the Moon, One of the craters is the huge Hellas 
Planitia, It is about half the size uf the continental 
United States. The southern half of the planet has more 
craters than in the north. The south is also higher in 
cJcvation, 
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易于扫读的标题 



习娌蓐苓 


你为下列文章写出直击重点而且易于扫读的标题 U 这样能为文案带 
来 Hipster Intelligencer 员工想要的报纸网格吗？ 


ii 段 i 宇不仅# f ‘ J 纟與吉他* 2苟世界 
备他衍法 出的不 阌吉飴类型 


Acoustic Cfaita^t Types 


Acoustic guitars arc used in a variety of different genres 
across the globe* Because of the long history of the 
acoustic gaitar, there are many different kinds; some 
kinds arc rardy considered guitars, such as the ukulele% 
which was based on the four-stringed braginho or 
cavaquinhos from Portugal, 

这段太害讲 到路德多在签瞀韌教注幼中粉 
涑的免如集你阌的提约3?老之 一 ， 


^Aattin Luthet 


The Protestant movement mav have commenced earlier, 
but the pubiication of Ninety-Five Theses by Martin 
Lather in 1517 spurred on the revolution within the 
Church, Luther attacked the Church^ theology, which, 
he believed, misrepresented the Bible and placed too 
much authority in the hands of the clergy, and wished to 
reform the Church. After being excommunicated, Luther 
published many books on Reform, Luther’s works wurc 
most influential in Germany and Scandinavia, 


差的.这 段左字 明砝级 到祕理与丈荃 
有时 轉 M 毯 虑的差根葡荦、 " 


Q 


The Qeo^zaph^ oi N\ais 

■ 秦 a fc a- -I I- I ■■ -B r * I « ■ 響 ■ ¥ •■響 ■ 4 警國 


The surface of Mars is a lot like a desert on Earth; it 
is very dry ami dusty, but it is also vary cold There 
are a lot of loose rocks and dunes of fine sand, Clrater 
impacts mark the surface, but these arc not as common 
as un the Moon, One of the craters is the huge Hellas 
Planitia, It is about half the sixe of the continental 
United States, The southern half of the planet has more 
craters than in the north. The south is also higher in 
ckvation. 
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网站写作 



问猶 


(®i ：为网页加上_堆小型列表项，不是会 
让页面变长吗？这样不是比短网页更会刺 
痛客户的眼睛？ 

^:不会。事实上，列表淖助用户史快扫读 
H 页，并史加容岛吸收更多佶息^列表将包含 
许多信息的句子与段落拆解为容&阅读的 小块, 
列表或许稍微拉长了网页、但如果用户觉得内 
容很重要.他们将很乐意拉到问页的下方…… 
还有，既然你已经采用倒金字塔法编辑文章， 
用户就可立即判断内容对他们而言是否重要。 

1^1:何时该使用列表呢？有些地方你们 
使用了列表，我没用；有些我用了列表的 
地方，你们却没使用 0 该怎么判断呢？ 

列表适合把皎长段落分解成两三个较易 
管理的内容块，如果你分解出的段落数 f 比我 
们的多，也没关系，忸也别过度使用列表。欢 
迎多方尝试，并在简短岑关注的句子与列表间 
求取平衡。两者均能协助 ffl 户产生兴趣 D 


ip ) ： 你们的解答中出现了定义列表 
(definition list) ，这是什么？是什么让你 

们决定在哪个区域使用定义列表？ 

^: 定义列表不忟可用于定义！当然它能 
呈现网或短语并拢供其定义、钽我们选择使用 
<di> 列出四家新公司及它们各自的职责 p 

tp) r 如果我在 “New Yorker ” 习题中没 
有找出所有列表与标题呢？ 

嘿，别对自己太苛刻！说真的，它们的 
H 页上有非常多的标题与列表，如果没有全部 
找出来，没什么关系 — 直练习，很快你就能 
写出专家级的网站文案——并从其他人的网站 
中识别出相同的技巧。 

继续练泠。你箝編茸鸟編 
輯的网站文策趙多，你对文 
牽瘇身和玎扫锿性也会越拿 
手。 
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写出可扫读的标题 


篇习超 


使用刚学会的技巧为你的前四段文案写出标题 


In 1973, Gary Gygax and Don Kaye founded Tactical Studies Rules (TSR) to publish the 
rules for Cavaliers and Roundheads, a game based in the English Civil War. Cavaliers and 
Roundheads was the initial focus ofTSR^ but Gygax and Kaye also wished to publish the 
rules for Dungeons & Dragons，a role playing game developed by Gygax* As Cavaliers and 
Roundheads began generating revenue for TSR, the partnership was expanded to include 
Dave Arneson and Brian Blume, Dave was brought into the partnership as a game designer, 
but soon kfi, while Brian Blame entered as a funder Biumc believed that Cavaliers and 
Roundheads was nor generating enough revenue and encouraged Gygax and Kaye to focus 
their efforts on releasing Dungeons & Dragons, 


In J 975 Don Kaye died of a scroke. The immediate result was that Blume and Gygax 
dissolved TSR and founded a new company named TSR Hobbies, Inc* The board of directors 
for TSR Hobbies, Inc. consisted of Brian Blume* Gygax，and Kevin Blume. 

Roles were assigned as follows: 

• Brian was President of Creative Affairs 

• Kevin was President of Operations 

• Gygax was the new company’s CEO and Presidenc 

Unlike the cquaJ partnership of TSR, brothers Brian and Kevin owned a majority of the new 
company’s shares. 


TSR Hobbies, Inc, experienced phenomenal success in both the United States and abroad. But 
the Blumes began to overexcend che company's reach, They moved imo domains such as board 
games and ioys t and began to diversify into unrelated areas. The best evidence of this was the 
unapproved acquisition of Greenfield Needlewomen, a needlepoint business owned by one 
of che Blumes* relatives. Also, Kevin Blume had primed millions of copies of the previously 
successful multi-path Dungeons & Dragons adventure books, which couldn't be sold. 
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In an effort to mitigate the mounting financial problems, TSR Hobbies, Inc, was restructured 
into four companies rhac focussed on differenr areas: 

TSR* Inc. 

Continued to manufacture the company’s core Dungeons Sc Dragons role playing products 
TSR Ventures 

Focused on the production of plastics and toys in Asia 

TSR Inrernational 
Established to manage: 

* Overseas business 

+ Distribution* sales and licensing 

• Production 

TSR Entertainment 

Responsible for leveraging TSRs IP in other entercainment markets, such as movie and 
television 

Unfortunately, TSR Entertainments only success was the short lived Dungeons &: Dragons 
cartoon* Gygax claimed the separate corporations were Blumes attempt at keeping foreign 
income away from US caxarion* 


现在谪为文章的其他部分设想标题，完成后，请到 XHTML 中做相应的修改。 
标题更新完毕后，请下载中央 <div> 与侧栏的内容， 

www* headfirst labs.com/books/hfwd/chapter7/cen ter.html 
www, headfirst labs -com/books/hfwd/chapter7/sidebar.html 

并为这些内容加上标题。 
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正面出击 



长篇习超 


你的所有文案应该都加上了标题，包括中央与侧栏的 <div> 0 
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这些标题与列表在浏览器中的效果如何? 
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脑力锻炼 


报纸具有与众不 P ] 的排版与风格 9 请看看你手边的 报纸， 想想它 
们的字型。它是 serif 还是 sans - serif ? 行间距是大是小？报纸排 
版方式的卟现如何使报纸看起来 H 像报纸”？ 
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通过宇体强调重点 


混含使®孪体采强调标题 
乌其他文孪 

在网站 L 使用不冏的字体可以戏剧性地大幅改变设 If •带给人的感觉与情结 。最 
ir (要的足，不同的字体可 ih 你的文章更好读，让用户更较松。网站上存两大类 
字体: serif (衬线字 体} 与 sans-serif (无衬线字体 ） 。 

混合使用 serif 与 sans-serif 可为网页加上不错的风格,而 1 有助 F 区分内容与标 
I 我们也能放人此 df 字体，冏时采用缩小也很安全的 sans - serif 作为主字体 6 



boo … _ 

SHE ©E 心帅 — — /web.MW9 

. - . *#*■» c-i. — ■ -n ■*• ： r * ■ — ™ —■ ‘ IL^lerf ? 


HP Producis 


HPS«fvk<i 





Welcome to HP 
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tE^fcftfegfeHaKw 


孝体用子丈杉 
絶' 刁釗建鸟主沭 亡 
字电錡的对 efc a 


ASStSTAHCl 


㊣ 的 FAW — 從以在字 

侈注合用子主®内容 
分 S 。 


A^Cww 




Effli^AcimiAJLEEedyciL mci v 


L. 




serif 宇沐如 Times New Roman , 
是由一个小小的突出部分（也 


称为 serif ) 乘 定义， serif (衬线）是指 
字符主要笔刚外的延伸。 


s a n s - sc r i r 息为没线 ，乜栝 f 
Helvetica 与 Arial 等字体。 sans-seriff : f^ 

更容易在屏嵇上阅读. n 为相对分排 
屮较低的电脑屏辟会 U>eH f 卞体砒得校 
糊，字号较小时尤苒明显。 


但这样不表示你不岈以在 N 站 h 使用 
serif 字体，只足耑要正确地陡用，并采 
JH 足够大的字号编排，才能让用户较松 
阅读。 
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这玎不是狨我称为 


您妙的 


的 K 变 


乎能引 A 


些改®标超大小的究化哟? 




可以，但请小心。你所说的改变是指文 
字大小还是指标题层次？ 
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标题的重要性认层次而非尺寸表示 

HTML 诞生时就已经带有六种不同的标题 m 次：从 <hl> m <h 6 >. 没街 样式表 
(只有 标记） 时，大多数浏览器编排 <hl> 为最大宇号, <h6>_ 为圾小宇号。 

睹记住， HTML 是个标记语言,并来意图传达样式信总。+同的梅 题层次 用来丧 
示 ffi 要性。第一级标题 <hl> 是最肅要的标题,<112>的逍耍性则下降一级… 依 
此类推。 

为你的网站加上标 id 时，済 ili 得以 <hi> 或 <h2> 标记主标题,子标题则采用较 
低层次。这样将确保_站的语义正确,搜索引擎也能正确解释你的内容(请记 
住，拽索机器人无法看到你的设计） a 


A 


t<vtp«rUP4 


偉用 CSS , < A 6> 

号 < h (> z 读务必 
< o<i t 杉起鹐考甚 
用子表: s 功秸上的 
f 袭 g - 拓不 圣表 
序尺4之 _)■ 


jCHQ© 函 0 







1 Indteg Lncl I 


Heading Level 2 

Heading Level 3 

Heading Level 4 

Heading Level 5 

Heading Level 6 





使用 CSS 可以把层次较低的标题设定为较大的字号一这表 


示我们应该这么做吗? 



目前位遌 ► 269 




















serif 与 sans-serif 


ti 華 


今晚主题： serif 与 sans-serif 讨论易读性以及谁才是更好 
的网站 字体。 


Serif: 

Sanserif, 我在这世上的时间比你久多了 5 我已经 
为新闻与书籍服务了作多年，所以我具是不理解为 
什么内己不是 Web [it 界的完荚选择 • 


听起來好像你在字号缩小时也很淸楚的样子。再 
说，用户可以调整浏览器呈现的文宇大小。大家都 
会做啊！还苻，你说我在屏嵇上糊成一团是什么意 
思？反正大多数人都已经有新潮的屛薜了。 


这招太奸 诈了。 这不是一场文明人的对谈吗？你有 
证据支持刚才那些话吗？ 


噢！唔！呃！好吧！但你必须承认，还是有些美观 
的 serif 字体的，包括 Georgia ——特別为网站制 

作的字体。 


Sans-serif: 


听好，在书箱或杂志上读起来比较轻松不表示你也 
是网站的较佳选择。你身上那些小小的“衬线”会 
让你在屏幕上糊成 一团。 还有，别让我开始数落缩 
小你的字号时的样子。根本不 成字。 


呵呵，老兄啊！首先，可不是每个人都懂得调整浏 
览器画面里文字大小的方法，而且屏幕与印刷品的 
分辨率大有不同。就算是最新潮的平板显示器，它 
的文字分辨率仍与印刷品相差甚远。试过用你的新 
潮屏幕看完整本书吗？眼睛会痛到无法看完。为什 
么要用 serif 宇体这样整自己呢？ 


www;websty leg uide.com/type/face-html 
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Serif: 


身为浏览器的默认字体还蛮不错的。没柯比这更好 
的宣传了。不过， Helvetica 也为 sans-serif 说了不 
少好话 1 还苻 Verdana 敁近在 Web 界也闯出一些 
知名度。 


Sans-serif: 

我也是 Georigia 的粉丝……尤其是用在标题时 
但你最近出现在每个地方。 


实际坐下来跟你谈谈还算可以。你可以为我的网页 
带来不错的效果，如果用在正确的地方的话…… 



最后一次活动练习了，以下是尚待完成的事项; 


修改 XHTML ， 使用不同的标题层次。 

別保葙 CSS I 现5个 
杉抵的 d 逄内容 


为不同标题层次创建 CSS 样式。 


的该龙。 


□ 使用 CSS 设定主要内容文字的样式。 

□ 你喜欢创造出的列表吗？如果不喜欢， 
谓用 CSS ! 

请停在这一页解决毎一条待办事项，直到完成为止 a 
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你的成果如何? 


• 让我们看到你 
URG , 以值我们 


谙建 i — 份你最滿意的 Hipster Intelligencer 
S S , 然疟犯 WRL 岌表 Head Finrf Ubs 的 
a Head First Web PcsigH M 讨论 So 捿 T 來的几 

我们将给最佳作品颔龙装品。 



你修改了 XHTML 并为标题、主体文字甚至列表加上了 CSS 样式，但你的 
成果如何？跟我们说一下吧！ 
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你的 Web 设计工異箱 

各位已经掌握了第7章的要点，并 
从里到外全盘了解良好网站文案的 


写作方式。各位应该能写出具有组织 
性又可扫读的网站文本。接下来还有更多东 
西等着你……继续下一章吧！ 



复习要点- 

■ 人类阅读屏幕的速度比阅读印刷品 
时惺15%, 

«屏幕的低分辨率（与印刷品相比） 
经常造成双眼干涩刺痛——使得阅 
1 读屏幕上的文字不太舒服^ 

_在网站上，人类阅读的方式与阅读 
印刷品不一样。扫读取代了阅读， 
我们寻找有意义的关键字、句子和 
段落。 

■ 采用倒金字塔法一以内容摘要开 
奂，后接细节信息。重点在于用户 
可以随时停止阅读，但仍能确信已 
, 掌握了最重要的信息, 


- 比起为了印刷媒体而写作的文字 
量，用于网站时谞减少15%。 

■ 使用列表分解大块文章，并为用户 
的双眼 提供一 个扫读网页时的关注 
焦点。 

■ 在网站上阅读 sans - serif 字体比阅 
读 serif 宇体轻松，尤其是字号较 
小时。 
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S 玎钫问性 


命 


^ 不可访问，致命缺陷 ♦ 



你碁. ALT 标签 B 经祐定 
3……我 RSS 爯多两天时闻。这样 

你玎敁接受码？ 稃托啦 . 我 R 甭要 

再於 < dlv > 棑好峨序，然疟你轼陡浔到 
、一松你想要的东®; j *. 


关于体验网站的对象， 目前 是否有人被遗忘了？ 各位的网站或 IT 笼观大方、 
布局 a 好，导肮较松…… fn. 不代表飪个人都满怠无论对视隙人士还是有蓝绿 
色弱的人，你的网站都必须 迠可访问的。 否则，各位将流央用户，件彩响你的唞 
亚。 m 足乜別太扒心： 可访问性并不难！ 通过规划 标记的顺序、 使用 ALT 厲性与 
L0NGDESC 秘签， 汴考虑 色彩的问题， 各位将 O: 即扩展受众的数带。在通往 
可访问性的路上,你可能还会拿到 WCAG 认证! 这是什么? 翻 开后续内容,你就 
会知遒了…… 
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为您介绍 audio -2 -go 

Audio - 2 ^ o ： 有障礴的可钫问性 

Audio -2 -Go 是-■个对盲人与视陬人士销惜有声书籍的网姑。但网站老板有 
个 问题： 他的网站不适用干视力有问题的用户！原本为他设计网站的公司 
对干可访问性 UccessibiUty ) —无所知，现在，他流失用户的速度比起 i 兑 
句 44 但是我看不到你的网站长什么样子！ ”还快。 

Audio -2 -Go 现在要雜你挽回用户——日常生活中需耍依赖可访问性的人。 





__ : _ _ _ 
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Audio 2) Go 咖 E 


Sign Up 

Cre«te ko 


vex Kcount with Audio-a-Gfl and begin 
davmjoidiEig bofikj All you urtd ii 

yoxtf 如班 U «ddreu credit card to get auned 

mid there b no coiUmt t 。 $ign* aaytiinc 

you wish- 

Download 

Once you create y&ur Account you can download 
our hJ^h-quallty audio for uw m your iPod 
crctbcr MF 3 ~compaUbl« audio player. Audio 小 
Go dUo XtJti^LA youf pLtfdmcs io you cod 
download yotir books at any Hme. 

Listen 

All of our book# *rc narrated by the nutboror 
profcxsictnal voice actors^ rveofded id lugli« 
definitioti audia formats in professions studios 
and meticuloiitly edited in post-product! an. 

Hands down, Audio-2-Go oflen the beat wicction 
of sudio books anywhere at the higjjeat pos^ib!^ 


Featured Books 



ST A I 1 


3 A ] 


☆ 


☆ 





☆ 


☆ 


AddJoa Co, a^l ri|^ 任 n*mvd 




☆ 





☆ 


人士拢偁这 
1 &韦祥的苟 
声缓本。 


: I 

\ — ■ — — I—■ —I 



你过惪分稱丰爷 
廣黎参规这个昀站？这样你 

火棍杖 2 一 0 _ 


/蚩众 


Q- 
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可访问性 


玎诂闽性是指 每个人 郗能 
使阁你的 R 站 

好吧，究竞可访问性是什么?当残疾人不能使用某个网站时，这 
个网站即为不可访问的 ( inaccessible ) ,当你的网站能被残疾人 
使用时,你的网站即为可 访问的 (accessible) , 

迆本上，创姐残疾人也能使用的网站，其中的过程与技巧就 
是“吋访问性”。网站的<访问性通常要面对视觉障碍、听觉障 
碍、肢体障碍、语言障碍、认知障碍与神经障碍人士。在万维网 
上,可 i 方问性也包括考虑年长若需求的设计，因为他们的种种能 
力已随罃年龄而改变 & 


可钫问性是思考 
残疾人在 

体验:享受你的网站 
时有何影响。 
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了解屏幕阅读器 


你的 R 站 1 起来是什么#孑？ 

想到投疾人时，各位脑屮闪出的第一个念火大概适视陴人上或 W 人，这类障 
fiil 对干理解网站产生巨大影响。所有视觉惑知 … ■■你苻到的多少变得不再见 
耍， m 听到的内容则不然。 


k 部分17人使用屏嵇阅谈器浏览网站.墀沾阅读器是种朗谈网站文卞内容的 
软件。市面上虽然有数种屏嵇阅读器，最受欢迎的应该是 JAWS ( http ：// 
www . f reedomscientific - com / jaws - hq . asp ) ， 足种只限于 Windows 平台 

的产品。 Mac 的用户通常使用 VoiceOve _\ 内置于 Mac OS X 的辟幕阅谈器 

{http://www^apple-com/accessibi 1 ity/voiceover/) ^* 



Heading level 2 : 
Listen, All of our books 
are narrated by the 
author … 


tr 


* 




FMtuml Books 


7c 论使川哪个屏孫阅读器，它 n 的会大 p mmn 内容 : 


孟莩阅 读 器摆邛 HTML 杆 vg 
來紡沒网员 


GO HOWf ： 




•.^d 8 I ■_ 

1 .' 


6^>j 


Link; Ooogle Search 
book cover dot |peg.. 


名仿奶枝 
出乘 "… 子 
残庙人沒 ft 么 


Sign Up 

viVXQUBi with Au4Lo^*-Go asd bpj^n 
jmnvdhlrly. AU you nt<4 i* 
\r ‘nd * credit to AC 1 il _rE 

\ Lhtrc b w eanlrict lu ilfjL Cancel 

Jwiih. 


Listen 


滾蓽阅读 s 在明 
请 之字窃 先报告 


wnload 

j>d-u trtilc ymir iAcutit ytpij candownlo<&d 
tr audio fer ui^ ia ^Lir iPod 

ir^-stwr M^OTnp^tib!r audio pl«>^r. Audio J- 
IfHdu )vur pufdliJr^ u& }tlui £nrk 
dowijjyad your bookj a ： any lime. 


All botikj air R&Tt-alrJ by Lht aulhur 0 ? 

pro^^ieioruJ \ts3<» A£tort r ]n hij(h' 

definition audio £&Fm4?* iev pr*f ㈣ iiQn4 iiudioi 
A»d mrlifuJciuj]> , ^diit^J ini |DCi»t*[^<Mlu£lioci. 
Ilflodf Audio-S-Go oflfifr* tJv- if5«7tLon 
u!niid>a bookj ar^^btit m tht litRhest po«ibt_ 
quulSly. 





* 编注： 原文采用的 H 址 http://www.app]cxom/macosx/featurcs/voiceover/ 目前被重 
定向至 hUp://wvv\v,applexam/macoHx/featurcs/300,html#univcr5alacccss fl 
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可访问性 



磨笔上阵 


除非实际体验视障人士使用网站的情况，否则我们无法真正理解可访问性的需要。若 
你使用 Windows 主机，请启动 JAWS (它有免费试用版） t 若使用 Macs * 请启 


动 VoiceOver , 然后让屏幕阅读器处理你最容爱的网站 
前请闭上双眼。 




对了……开启阅读软件 


各位对于视障人士的网站体验已有了初步认识，现在来听听 Audio -2- Go 网站，打开 
屏幕阅读器并让它处理 Audio -2- Go 网站 （ http :// www . headfirstiabs . com / books / hfwd / 
ch 08/ audio 2 go _ before /) ,写下三条从这个网站了解的信息，然后写下网站整体的 
用途 …… 只能根据通过屏幕阅读器听到的倍息。 


Audio 公 fro R 站布何用途? 

O ………■-…… 


❺ 

❻ 

^何视感? 
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电脑是傻瓜 


R 站的信患应该清蜥……对 所有人 

Audio-2-Go 网站的倌总听起來不太淸楚，对吧？网站的关键足对受众传达一些 
内容。这表示各位的工作是 ern 人内容对于使用屏幕阅谈器的人来说就像对 T# 
得见的人一样清晰明了。但当我们在 Audio-2-Go 网站时,许多内容都在 
软 ft 翻译时遗失了。 


以 K 是几位视障用户对于 AikHo -2- Go 网站的想法 


■ 卩句问网 ㈣ " 



o 


Sign Up 


Featured Books 


r»tt 


Aiulio-l'Go azkI bc^jn 


KQDUZa ： 

^3A boak* jmrBpdmdiy. All you as 
Irwi* inrf * atiAit 
LURlfhl to CftncrL USjiillM 1 


0 


我完全不知埴 
? o 我浪布咕到两舜的名 

持 - -只布一些文字和许 

多咁起来很奇忮的东®。 


t |rUti>uil^ you CslA download 
dio fi]c* for in yoar 

hj >tju 
Any tirscL 



HI I 
⑴ 

[VI X 『 A1 


☆ 




网页杉，砬.页头 


重龙 




r of our boak^ Mrt- lurraSt 1 ^ bj 1 iSv Author oj 
voiff *fKim h rwt»rdf4 in hljih- 
d rBnition- -audio formal ， ica prafrudcnjld riudiOiE 
ju> 4 «3iJ^ in pp^l-production. 

llAOtii dawn. AL*dio a Co oCfen tbf l»n »3«xir^a 
of ■lud^ci books i^'wbfrr at tbe h ： |^3«t po-i3；blt 
i^LLLiin 1 . 



<y 




☆ 


屬单间读器.口•会 
炫出这咸用卢丈 
慈不薛的©译 



的硬 4时子4单阌1■卖器邦 
名非當重5 …… (2^ 时吁搞 

不濱今妖况的摁驊存问者 ▲重 
之彩响 D 


o 


o 
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可访问性 


i 对事实：电胎是傻 E 

如果你想大致牮控屏棬阅读器与可访问性，必须接受一件事：电脑是傻瓜! 
—台电_或一个软件无法分辨出阁像代表了书箝，也无法分辨出人獎想听到 
书名这种市。因此，尽管你的网页 hM 现了书籍与矜起來俛书的图像，电脑 
所见却完全参同。 


人类3以卷卷® (泰斿 
描注拓汜專 4 。 


o 

0 




沒苟其他信总时*窀尨 .q 会着 
约文饽名島护篆名： 




騸力锻练 


该如何让电脑知道图像的实际意义，还要采用屏轧阅读 S 可能 
会理解的方式？ 
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alt 属性 

电脑将朗读馒像的 ALT 厲性文本 

屏幕阅读器遇到图像时会发生什么?大多数时候，它只会读出文件名称…… 
这样对于视隙 H 1 户完全没有帮助，幸好， img 元尜荷个可 i 上我们瑣人阁像说 
明的弒性 （ aitHbute ) : alt , 如果 P 嵇阅读器遇到 A 有 alt 屈性的图像，阅 
读软件将改为朗读 alt 属性值，而不再读出图像文件名称 K 是完美,对吧? 

嗯，但也必须冇很好的 a it 文本才行。 

幸奸，耍迚立良奸的 alt 文本非常容易。只需要简短明确、 R 描述性的短 i 吾。 
换句话说，防简单扼耍地形奔 图像： 



仏屬沒 fjl *? 

杉爸中， 用今阇怒 
描注 ©嚷 6 釦杲想迂 
过 XHTML 耠辽，辦 

有 <— > 部乘有必属 

fi. 


<imq alt= /<F cute orange kitten src= M rcmulus-jpg" ,/> 


cute orange kfftew 


人类 a ! 着 J 1 ) 笱爱橘 
色 - i 猫的照片。 


(島孱畢®访器）现 
存卷 A 属 fi , 殓的奶 
亡本而 Oi 件名 u 
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可访问性 



々瓱 


根据每幅图像的信息创建 < img > 标签， alt 文本已经由网站拥有者提供了。 



丈件名： audio2go-logo.jpg 
说硪 : Audlo-2-Go header logo 


存 stfcg 达龙 § < im S > 杉签 







Google 


~ ■■ - 


—- 


I I ifcr . auh 


i — i—i* 

■ i-n i 


^ y- I 
Ir ^9* ft -*- 


文件名： googlestory.jpg 

说硪： The Google Story: An inside look into 

one of the World’s greatest technology startups. 



文 件名： poppinsjpg 
说吨 ： Mary Poppins by P,L. Travers 
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太长的说明就用 tongdesc 



— mm - 

请用屏幕阅读器加载 Audio -2- Go 网站 

i # 到 Head First Labs 网站下 SAudio -2- Go 网站。用你的文本编辑器打开 index . html ， 井 
为前一页的图像加人 ALT 标签 & 然后.启动屏嵇阅读器，再次检査 Audio -2- Go 网站, 
状况改審了吗？ 



The Google Story: An 
fnslde look into one of 
the World' s greatest 
technology startups. 




Audio I 


Qq home 


daHTLEeudinft books ixmckHuatFly. All you. ne^d is 
your email wldrw n^d « mdtt card (o surted 
trvA i，no contract to Conml anytime 
you wish. 


Google 


Download 


Onw ypu crcott can downlo 

am hl|th~qua]Lty audio tilts for in your i 
or other MP^-cornpgtibip audio Audio 

Go alio truJu your purdu^es sa you can 
dowolMd^nr book^ at any lime. 

Listen 


All of our books arc iumkt«d b^ F the author 
professional voice actors, recorded in 
de^oidon audio fornmu in professional srudios 
xnd meticulously edited iti po 软 -product 沾 O 
Hands d«>wn, Aiidiu-S-Oo ihc beat ^cjdkOEi 
af ludio^ 1 "* - biphnt ptWbj- — 


alt= ,r The Google Story: An inside look 
Into one of the WorlcTs greatest technology 
startups ,r src=.’googlestory-jpg /> 


<img alt= M Mary Poppins by PL Travers 

src= ,r googlestory-3pg / > 


<img alt= 1， AudiozGo header logo” 
src= ,, auciio2go-logo,jpg /> 


Books 
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可访问性 


O 


0 


我逆 认为 alt 文枣应诶简单坭要。 《 ThehogleS 切 ry 》 邡 
本书的说硪不会太长？吆？迖样，光達朗泫主克轼要铊 
10分钟。人佘虽热布视党上的择磚，佴不表沄他们就锊 
枱生数小財咁 R 页咜7 




每个人的时间都很宝贵。 

没人想卷或听完-•个充满不瓜贤文字的网页。太 
长的 alt 值将拖慢你的网页，而且-_盘送出没人 
m 要的恺总。我们需要一个提供元素的额外信总 
叫又能 U : 读者或听者选择是否取用额外信息的方 
式。 

longdesc 厲性就能做到这一点。 longdesc 为屏 

藉阅读器提供了取用元素的额外信息的选项…… 
例如较长的说明文宇 (longer description -符 
出 longdesc 从何而来 f 吧？）： 



简短的山亡冬祛供®像的 


<img alt=_ T cute orange kitten’’ 

longdesc=romulus.html 1T src="romulus.jpg 


f ⑴ ish 此屎付养出有个网运 记录了 I 多鉍节-，… • 

爱脉)姻众多认 ㈣ 轩用户恝知 


cute orange kitten 


o 



你想知逍更多信悤 
吗？ 




ggg ; 


大多敫廢華阅读器 3 让亨们 选择甚 5 该 
出 ton^des^ 指余闻英的 ( 倉忌。 
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为 XHTML 加上 longdesc 


将过长的 ALT 丈本转换为 L 0 N 紗 ESC 


我们来 把肜容 «The Google Story » 的过长 alt 文本转换为 longdesc ……并加 
上另一个 XHTML 网页 ^ 以下是需要的步睞 ： 


O 为 《The Google Story 》 
PESC 屈性 ^ 


-书加上 torn- 




如入 J longdesc 它 

㈣ 更鳩 


<iing alt=^The Google Story 〃 longdesc= w goaglestory -html^ 

src^ M googles tory.jpg ' 1 /> 


❺ 制建名为 googles 切 ry.html 的 HTML 两克， 
吞加入更长的说硪文字。 

你在 to ^ desc 爱？1用的立件在该 
袅正常的 




CDOCTYPE html PUBLIC ，， - //W3C//DTD XHTML 1*0 Strict//EM ,r 

"http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd 1 *> 
<html xmins= 1, http ： //www i w3*org/1999/xhtnil ,r 
xml:lang= M en M lang=’_en’_> 



赵&长的这切 i 字旋存殺苺 
彷答 «p» (S )^ 如果霜屢 
备倍可加入 S 多来亡 书祥対 

<body> ^ 

<p>The Google Story: An inside look into one of the 
World's greatest technology startups-</p> 

</body> 

</html> 


<head> 

<title>The Google Story</title> 

<meta http-equiv=_’Content—Type’ 1 

content= M text/html; charset=utf M 8 l 7> 

</head> 


磘认 S 豸内容加上 (I 备的枉记。 
硝话伎，忿仍然 *HTMt 泛件二 
洩们龙 0#- 切合呼钫:该！ ’ 


t 州 ㈣㈣ 着&来料空•，… 
fS 它们&明孩用 
Toil 视常用。 
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The Google Soctfy: An msidc took tai& oocof ibc Worid r s gicocest nedmology smnups. 
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再试一次 Audio -2- Go 的屏幕阅读成效 

沾为 «The Google Story }) 的图像加入 longdesc ， 并创速相应的 XHTML 文件来保存 
实际说明信息。保存你的文件并再次在屏幕阅读器中加载 AucHo -2 -Go 的首页 a 



现在+闳该器钱让我们逬 

用终迨设舍愿的人崎一长 
專描1 




Sign Up 

Om aji ancrFusJ. witis AudJck-3.-lj4 

lis-n-rJo 斗 'boiaki r-rTHfijuiirir -V] yw r>«J. u 

yt^ raud AikJ ■ (T«d>l cvd U> pt 

»Pti »M C¥>sl ； TMt Cd 

you wu!l 


Downl 


All of 






finiLxfesJy «ki-cd 
? i^mrbfr 


H* adi d 

□p tnc^Hgx 


LW»d«n4 

^mTmm 




Goggl 


Featured Bcxm 


-f.-r 




jow CTTttf JM3U7 IWCWJSi you OS 

mz bifh^pultty &U* b^r u##- tc >«uj tf'od 

of Mbf ； MP3!-cuAt^ ： ib£r tixL^ pUyri-. Aurbti-2- 
Ijo tradj jTT^jf <xo jvn rtr 

如 ywf boqllA *T J-TJF [ 


in K>j|h F 

ii3 pF&^«4sa£ ftudu« 
ja poit-pndud'k 
Co aC£hrt tht bnt wlc«tk]4 

tt^d ibr 琴 4 


:完全都是文字说明的网页也=视觉没有障碍的用户也会看 :所有屏幕阅读器都认得 

需要与网站采取相同的设计吗？ 到 LONGDESC 链接吗？ longdesc 吗？ 


^ :不用。只有使用屏幕阅读忍的 
用户会读肷说明网页.所以，你只需 
要（语义正确地）标记文字。不需扣 
上 CSS , 


會.只有使用屏暮闯读器的人 
才“肴得到” longdesc ^ 没有视觉 
障碍的用户甚至不会知道有这个4性, 
除非他们查看网页的源代码， 


答 : 很可惜，只有蚊析的补幕阅 
读器认得 longdesc ^ 校老的 I 幕闻 
读器并未内置此切能，幸好，0前 
的 JAWS 版本，也是目前使用人数最 


多的 I 幕阅读器，支持 longdesc 。 
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没有鼠标的网站导航 


对子 Audio 公發 0 的 鄯分 阁户, 
前®的改良碥实有箝不罔 



mim 


專部运幼技社不诘。 
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可钫闽性不饺仪考虑屑冪阌锿蒭 

alt 与 lcmgdesc 屈性帮助各位在可访问性上前进 jf — 大步 但视 
障用户并非唯一的受众。许多人有使用鼠标的困难，或者只是更爱 
用键盘。这一点改变了一切。 

没荷鼠标的万维网？没错，事态远比你想象得更 复杂。 这表示你在 
检奔网站时必须不用鼠标。 



裒颺 


请用你最喜欢的浏览器打开 Audio -2 -Go 网站《请试着只用键盘在网页上移动。各 
位会经常用到 Tab 键。可以四处移动吗？移动时有何顺序？移动的顺序是否符合 
网页元素_觉_ 呢？ ^ 

# Option — T ^ 6 H t 印 3 存扑表輩 
的闷页 X 素问绳坏移功 。 


锼彥带领你 

在 A « cfio — Z — 

Qp 闽玷 i ； 移幼 

的戒存。 



Sign Up 

Cnotvui Kcouzd with Audl^l^Co kvI bejya 
baaks. isnmhlutfjy. Alt you ami Li 
ywir -cauu! tddr«o a cr«Ll ordto 單 ft (Urled 

A0 <thOtr«1 to tl^tL C«n«l 

ywkwish^ 

Download 

Dace youcrrAte yoi^r you ran dowiiJudd 

cuf hl^K-q|UAli^y ftudkt fet ufiftio. yo\ji iPKKi 

<a 亡 th«t tu4bo ^«3rrf.Aixlk>-a- 

€<» also tnckj yotir punh;u««iK> cuv 
dp^xJw! ypw boo“ ‘[ w tiuw, 

Listen 

All of our boo Vs bjc £ujra.tc<l by lb? •uthfit of 
proFcau^ail vokv aciqi^ rcoordnl ia hl^b- 
dc4liailllDO fbmuLf La pruFru±oadI sludiw 

«sd aup4ku£Q4u£y la pckfi-prodi^tma. 

dowiv Aii^-a-Co b«ti teifcti 如 

of «tidi4 bookj «il>Vfhrtv b.i Lhc pfijuiblr 


FMUmd Bodies 



Go^gl 


e 



合 


& 





iUSJNf^S 



* 


* 


☆ 
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使用 tabindex 



9 瓸蘚苓 


各位的任务是只用键盘来检査 Audio -2- Go 网站。你的双眼看出的顺序为何？ Tab 键的 
行为是否与预期相同？以下是我们做出的元素顺序: 



m 細 ㈣ 也含如則败 ° ^ 


典 oo 

k ^1 


Audio 2 Co 1 AMdaO Vwte 


t； I f • II Mi or 1 •« _ f m il^M t 

^■ 



嚙……这 些之宇 

的网资分 S 下 , 
结果砀 4 却存最 
后®。 


l \ udlo®Go 


HOME 



18 

3 




(£)si 



gn up 

Create AcscQ-unl fvith Audto^a^Go and 
dov/nlctadiR£ boolu tmnt«diAEtly. All yon need in 
your rmflU oddfess undii credit card to j;el atari rd 
and ihtre h no contract to si 明 . Cancrl an>tiitw 
uk 

ii load 

Ot»e you errate ywu account you dm down]04d 
mir high^qum)E ly Audio files for u»ia jtmr iPod 
athtT yiP3^»mpaiib]t audio Au<iio^- 

Gcr ah^Trackj yvur purchases so you can 
dawoI&Ad 户 ur books al uy iim^. 

In 

All of our books narrated by the author or 

prof<^¥iojutJ voice wAorv t recorded in 
deflation 4udio fomutj ie profewson^ ittidios 
Enfiifl^GKuly edited m pest'product ioil 
SUivUd^mTi, offeri ibe Iwit s£]cdioA 

of Audio bootu. an>%^h«re At ihe hij^lxst po»il]!e 
qmHiy, 


Featured Books 



A\TV 

fM 

>i \] \\ 


0 


Google 


合 


☆ 


☆ 




☆ 


☆ 


合 


Qi|q(Tl^t4b Airitlox Go, Id£. 4 aU rrartVed 


Td 馑后恕裁 
们带利韦鞴 S 
ii 神表现不时 

哬 . 左_ 

介绍 i 吉祐？ 


& 


p- 




动动臃 


试着不用鼠标也不用双眼来使用 Audio -2- GoH 站。使用屏幕闯读器“查 
看"网页时， tab 顺序是否对你有些重要？ 
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可访问性 


利爾 Tab 鍵的 R 页沟鄯移劫应漆 有峨序 

无论视障与否，利用 Tab 键在网页里移动的顺序应该与视线在网页元素上移动 
的顺序相同。换句话说, tab 顺序一般应该由左而右、由上 而下。 大多数网站 
的布局方式正是如此，我们用双眼处理网站的方式也是如此。 


然后，对干 Audio-2-Go. 我们耑要确保左_的文字 （Sign Up, Down load 和 

Listen) 在书轿供货之前出现。这样会给用户更多背景与线索，讣他们符起 
来更從观。为了修笈这个问题，我们所需要做的就是添加 tabiridex 厲性到 
我们的元素并为元棄 排序: 

，裎1列表 f 的场 & 辧以 

<h2>Featured Books</h2> 我们巧备个丰越崔 _ 

<ul> 一、个 Wide* 屢作。 

<lixa href-^books/l' 1 tabindex= lt 7'*> 

<img ait-* 1 the elements of cooking" src= t, images/elements.png' 1 /></a> 

<br />cimg alt=’.star_ r src= 1, images/star _ high*png M 
<lixa href= ,f books/2 ,p tabindex= r, 8’. > 

<img alt^ H state of denial 1 ’ src-^images/sod.png" /></a> 

<br /ximg alt-^star 1 ' src= 1, images/st:ar _ medium-png ,r /></li> 

<lixa hre£= ,r books/3 ,i tabindex="9 T, > 

<img Xongdesc-^google/html" ait= M the google story' 1 src= n images/google,png ,f /></a> 
<br /ximg alt-^star" sre-^images/start _ medium,png 11 /></li> 

<li><a href- ,r bcoks/4 M tabindex= ,f 10 11 > 


<img alt-^niarY poppins 11 src= T1 images/mp*png ri /></a> 

<br /><img alt^^star" sre-^images/star _ medium,png ,r /></li> 


<1 ixa href= n books/5" tabindex 骂 _’ll" > 

<img alt= M business of creativity" src-^images/creativity-png" /></a> 
<br /ximg alt- M star ,1 srce"images/st 沒 r _ high.png" /></li> 



<Xixa href= 1, books/6 ,t tabindex= ,l 12 ,r > 

<xmg alt s, ’designing web usability" src= l, images/dwu,png lt /></a> 
<bir /ximg alt= M star* 1 src= ,f images/star medium,png 1 ' /></li> 


ti 咕韦韃构出现在仔闷 
— x(S 蛟倣的无索后 
以苁仔何 uhnhx 值桌 


</ul> 


的; if 韵^ 


m 



整个 Audio -2- Go 网站都需要 tabindex 检修。请打开 index . html , 为所有需要的 
元素加上 tabindex 。 测试网页时只使用键盘，直到你觉得网页没问题了。 
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试验 tabindex 



9戆蘚答 


<ul id= M nav> 


<li><a 

<li><a 

<li><a 


以下是 Audio -2- Go 网站的 index . html 中大部分的标记（我们省略了不重 
要的部分）。我们使用 tabindex 指定顺序……你的标记结果也_样吗？ 

tabindex^title- ,r hoinepage M href- ,, index.html ll >Home</a></li> 
taBindex=^2titbrowse books” 
h re f- ,f books. html ,f >Home</a></li> 
tabindex='’3" title= n about Audio2Go ,r 
href =l, about .html'^Abou^/ax/li > 


</ul> 


<div id^'^eatured-books 1 ^ 

<ul> 

tabindej^ 〃 7 〃 href- M /books/l ,1 > 
alt= M the elements of cooking 


ii 达出■在枒记中的颅珞 绞竿， 住的锼含用卢 
它们的成存应孩爲达 一戋。 


<li><a 

<img 

<img 

<li><a 

<img 

<li><a 

<img 

<li><a 

<img 

<li><a 

<img 

</ul> 

</div> 


src ： =l, elements*jpg M /></a></li> 

^ 我们劣 7 7 g 




空问 …… 利扣 
中 S 4 係货了 


tiabindax= /r 8 w href- , 7books/2 1, > 

alt- M stat6 of denial" src- H sod.jpg M /></a></li> 
tabindex- w 9 ,jr href-'Vbooks/S 1 ^ 

alt= M the google story' 1 src^^googleopg 11 /></a></li> 
tabindexWlO" href= 1 Vbooks/4 M > 
alt^^mary poppins" src-^mp.jpg 11 /></ax/li> 
tabindex="ll" href="/books/5 n > 

alt= TT business of creativity 11 src= M creativity.jpg 1f /></a></ii> 
taJbindex— #/ 12^ href=’Vbooks/6__> 

alt=’_desigrting web usability.’ src^’dwu.jpg" /></a></li> 

行 4 枒记中的佬 ss 经很后赤？任这#殳 
/一 $的艰 序左讀 比它 I ：石坏组内容（韦祥链趄） 


<div id;"info 1 〉 

<h2><a tabindex="4 〃 href= ri signup M >Signup</a></h2> 

<p> Create an account with <strong>Audio-2-Go</strong> and begin 
downloading books inmediatly* All you need is your email address and a 
credit card to get started and there is no contract to sign. Cancel anytime 
you wish.</p> 

<h2><a tabindex—href =,, download ,r >. "</h2> 

<p>.. *</p> 

<h2><a tabindex="6 〃 hrefJ.listen 1 •: >."</h2> 

<p>,. .</p> 

</div> 
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可访问性 



不用鼠标操纵 Audio -2 -Go 的感觉如何？ 

使用正础的 tabindex 更新 indcx.htmL 然后前新加栽 index t html 并试着不用鼠标在 

J ^^^0 ption - Ta 6 ^ r U 

使用内 jf 的项序， • 


网页中移动^ 


用 TM 锼移功的坻存左 
找从网贡的历头耷导 




Google 


然后应该眺到网 
英介绍(用卢片 


■ moc 

J.LiXiJ 

I' 

.. - 

ml -V ». J 

細你 2 ^ 〗 Aydia |«V| 




f+J 

IB 1 

ffQ* Coog 丨 


o 


ign Up 

Dr^att an account with Audio-2>Oo and bo^tn 

downl 时 di 明 bookt imnipJiitdy- AJI you it 

your cmMI address and a credit «Lrd to scried 
and thert i$ no conttud ： to si% 0 - afiy^nie 

yo^s wk^h. 


Oo 


wntoad 

Onoe you cr««te ^our account you do^nJoud 
our hjAh-qumni}' im 改 o 51 eJ fof um in )t>ur iFo4 
orotbtf M^^•'Compdil \ b)tr nudio player AudLo-s- 
Co also tradti jujeit purchases io ywu m 
download your bwks At any lime. 


o 


Utsten 

AH oi our book* pjnatedly xht authfl ： o? 
proftHional ^tstc* sctors H recorded snhlgh- 
drfinllton audio forniaU iu ptofr^ionjl studios 
md mtiiculouj^ rdiicd in pa^t-production. 
Handj down. Audits2-Go offers lh^ brst ideation 
of^udio bookj. flny^hert j C iht bj^heil pouiblt 
quality, 


Featured Books 


CopiTltHl ©Audio* Go, 


All rijtbb ro^ntidL 


IQC. 


n T A 6 B 该袼幼釣羊转这織 
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重新参观 audio - 2 -go 

Audio 务条 0 的玎钴问程痘好多 3 


堂偌 恕一个 權糊、令人©惑的沔站，转变 
或_ 个芍 值用，瀠啪的商多窃台。 








达个 R 蛣邊来更布姐织 3 . 
不用鼠标，我现在也能在 R 
站上移动。 




«■» wanw^m brwr vmmm 


n^TBtaHllA|KMifHdMiM _ _ _ 

Jrt^fch-fan. ■■jln-j -Cn 'bMli ■'Wlhil HH^ESi 

wi rt^w hVia ■ ti^db»Pf J rt# h|JbP-« IJi^llp 

flwrfai 


爭都 (£ 幼技敍不強® 





fW«£» mh Mnli ■ 

VulLi ■w»J^pN j Jk ,3 m 

jfM v*d , _i，_ pp|p ^v> 4 , 偷 ■4、 

■^1 lbet#H ad ixx±rm^ £■ Bp 


只差儿碭闹荦的钐记移磕.却让一大苕用 
户终^■翁这 (5 JAudio - *2 一 S ? 5 o -t 移切 & 
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l #) : 若是没有 tabindex , 字段（表 
示正在使用的 元素） 会依照标记的 
顺序移动吗？ 

^ : 正是如此。 洌 览器因 tab 而移 
动的順序就是元素在 XHTML 中的顺 
序.不论 CSS 样式对外现有何影 

： 为什么不直接在 XHTML 里 
依照网页上线后的理想元素顺序排 
列呢？ 

^ :这个想法不错……事实上， 
我们柏 后就会提到这个方法，虽 
然 CSS 可以轻松改变呈现喷序，使用 
tabindex 仍然是不错的主意。 

:对于双手的运动控制能 
力不佳而倾向使用键盘的用户， 
tabindex 属性确实适合他们。但完 
全无法使用双手的人该怎么办呢？ 

^ ： 许多网络用户基于某些因索—— 
例如瘫痪、截肢，而无法使用鼠标。 
他们改用其他输入系统，例如 head - 
mo u s e (头部鼠标设 各）、 hcad- 
potnter 《央部 指针设备> % mouth - 
slick (嘴咬栺示捧）等指向设备或是 
语音识别软件与 eye-gaze sysytem (视 
线跟踪系 统）， 这些系统多半也能捕 


可访问性 


有蠢舰 


捉 tabindcx 属性……因此，逻辑 tab 喷 
序甚至显得更加重要， 

:不见得每位视障人士都是全 
盲一可访问性措施也适合用于他 
们吗？ 

^:当然。視觉功能障碍不仅仅包 
括全窗人士，也法盖莱种戏度的弱 
视 (low vision ^ 有时与 “partially 
sighted " 屁用） D 包括散光（视物不 
够说利），管状视力 (tunnel vision , 
只看到视线中间区 域）、 中央视野损 
伤 （central field loss , 只看到视线的边 
缘}、 白内障等。 

: 视應包括色盲吗？ 

令: 是的，色畜意指缺乏某个色系 
的感知一例如纹绿色苜、黄蓝色苜， 
有时候，色畜造成完全无法识别任何 
色彩。 

1^1 : 我们也需要照顾听障人士吗？ 

:身为可访问网站的设计者，也 
应该额及耳聋与重听人士。尤其当我 
们需要处理大量多媒体内溶，例如视 
频或音频时特别重要 


:设计一个可访问网站时，还 
要考虑哪些残障类型呢？ 

:还有认知与神经两方面的綠 
碍需要注意.包括学习障碎，例如 
阅读障碍 (dyslexia) ,注意力陣 
碍（例如多动在）、影响智力发展 
的发育障碍，甚至也包括记忆陣碍 
(如短期失忆、长期失忆或是无法四想 
语言等> 1 

1^1:该如何面对这么多认知与神 
经嫜碍的症状呢？ 

:在设计可访问网站时，有个很 
简单的策略可处理汰知与神经璋碍 
对于具有发育障碍的人士，请提供困 
像作为佶息沟通的替代管道 I 而且, 
月站若具有清楚的视觉逻辑（本书稍 
早谈过此内 容）， 对各种认如与神经 
璋砰人士的网站体验问題一样大有帮 
助 。 
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值得考虑可访问性的问题吗? 



可访问性永远值得付出额外工时 P 

为何耑要在意网站的可访问性？实在很难压下这个疑问。你的 
受众又不一定有残陣而影响他们体验网站，不是吗？ 可访问 性 
真的这么®要吗？ 

事实上，几乎可以确定某位残障人士正在试图使用你的网 
站。根据美国人口普査局 ( U - S - Census Bureau ) 统计,美国 
19.6%的人與有某种身心陬碍。如果这个数椐的说服力还不够， 
我们再多提出几个可访问性如此亚要的原因！ 

O 法律玎钫问性 



« U,S Federal Rehabilitation Act (美国联邦康复法)»第508节要求联邦机 
构应使其电子与洁息技术，包栝阀站，都能让残疾人方便使用。此外，很 
多全球企业都要求旗下的官方网站内容具可访问性。 

Q 每令人 都受惠子玎钫问性 

打 造可访 问的网站的许多强化错施与技术也对非身心障跗用户有益。可访问 
的网站通常更容易导航、对用户友茁而且下载速度更快。 


© 可访问性对你的盖 iL 有益 

深刻了解可访问性 的设计 工作室比不了解的公司更具存兗争优势。例如, 
联邦机构必须遵守可访问性的标准，但有时无法自 己办 到，这去示具有可 I 方 
问的网站设计的经验时，将更可能获得这些阂家机关的委托。 

o 可诂问性是应傲的 正碥畢项 

对于许多践疾人，可访问的网站代表 r 不依赖他人的一大步。这些网姑供应 
大馈政府和教育服务与佶息，如果少了可访问的网站，残疾人将无法自行取 
得这些知识。设计时谪记可访问性，能使链个人都觉得网站更亲切。 
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可访问性 


eoo 


Cmail 如 Opportunities with the Internal Revenue Service 






. 


Gmail Calendar Documents Photos Reader Web more 


I Settinqs | Older version ] Help | Sign out 


GMail 


( S^fxh Mail ){ S^tzfth the Web 


: k - 


CompowMail 

« Back to Jnbo ?£ C Anc _ ) ( Report S^i 


_ Analysis, and Global Opinions - 


WHiT - mt ! 


00 


〔 AnxhlyyJ ( Report Spam ) ( Dototo J Moro Actions 


▼ 


Starred 合 

Chuts ^ 
Sent Mail 

Drafts 
All Mail 

Spam 

I^ih 

Contacts 


再 Chat 


Search, add, or invite 


of 11 Older 


Opportunities with the Internal Revenue Service \ x 

Audio 2 Go show details 11:43 AM (4 minute ago) Reply ^ 
Audio 5- Ga , 

My name Is Ronald Dau\\ t and 1 work tor the IRS in thesr w©b services 
division, WeV© recently developed a series of audio versions of some 
of our most popular tax forms. We'd like to usq your service us a 
distribution point for those forms* Tha downloads would be free, but 
we'd obviously arrange a substantial contract to cowem your costs 
and compensate you for your services. WeW in a hurry ■ so weVe 
willirrg to pay above-average rates. 


Now window 
0 Print all 


这 Kxrswwi Links 

Sav^ Incomo LoQallv 
Dcftnc>d Dorofit Ptans S^oltof Tax 
AmS Buld ReUrom&ni treomo! 
www.412Plaj>s .ccmti 

20 Hour Wpfk Wopk 
Thhj HOflTO 如的 Bu^ino^s W9 WQfX 
For YtxisrKl Ooivor S2S0K(wr yw 
T hosocrothomobus ino^5.f>ot 






我剐位到迖封电孑邮件。齑起来是 
个不错的 商机“ …侄 WCA & 是讦 
么汆®哬？ 


Chat with your MM® 
buddies 

G9t start Dd 


Qplions 


- Labels 


Add Cch^MCI 


Edit tab^s 


Best, 

Ronald Dauti 
Internal Ravartua Service 




Idaho Tax Exempt Fund 

No- fodoraJ, fodor^l aktorr^tivo 
of Idaho atafeo ir»TOfno tax 

：om 

103 H Invo^tmoo^ 

Wo Match 1nv«tof3 To 1031 Pfocorty 
/^Oniocj Fqt Froc Wq . 

^ www r SljnEaitfMAoPropcai ^ com 






的老板 


磨笔上眸 


各位现在是 Web 专家了 ^在网络上可以找到哪些关干 
WCAG 的信息？它对 Audio- 2 -Go 网站有何意义？请在 
下面总结你的 卷法： 


• Audio 义 Go 

Set status here T 


Our only r^quinement i$ that you comply with the WCAG Priority 1 
guidelines. I'm surd ym can figym out Ihose detoirs on your end. 


1 Q 4 Q Tax Softwam 
ToxVfcjipfl PtcToq, 办 nal$Qftmro 

Incorgratod E - Fito 4 EJa^k Pfcducts 
www.NtsLnk.com 
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WCAG 优先级 1 核查列表 


WCA & Priority 


WCAG 的全名是 Web CoiUerU Accessibility Guidelines ( Web 内容可访问性方针 ） 。 W 3 C , 构思出大多数 Web 标准 
的团体，定义了这组建立可访问的网站的方针。遵循 WCAG 方针，你的网站将比未遵循时更能让用户觉得奈切， 


WCAG Priority 1 ( WCAG 优先级 I )是 W 3 C 认为是基础要求的一组方针，无视 Priority 
部分践陣用户以下是 Priority I 方针的大致 模样： 

Ch«ddbtof Qiedcpolrttt for Wtt Cotvtent Acc«S 3 lEH!ity 


则一定会遗忘 


A OO 




ftttp: / / w 咖 •㈨ 3 * 。巧 /TR/ 

WCAQ 


这个玄件 gg 有 
P^ni ty 2 和 3 。 fl2 
Audio-2—Cio p t 乘谋足 
P—iity f 方 f 七 


Q* Coo^f 


o 


Priority 1 checkpoints 




In Gttnfil (Pifcwty 1 ) 

hH 

HO 

WA 

1,1 Provide a text equivalent for every nontext element (a.g,, via _air_, w \ongdMCf w or in atetmnt 
content). This tndudes: Images, graphical representadons of text (jnduding 6yrrl>€l5), image map 
regions, animadone (&+Q-, animated QIFs), applets and programmatic objods, asdt art, frames, 
scripts, images uMd as list buitets. apacar^. gr^phteai buttons, sounds (played with or without user 

Interaction), standalone audio fit 賊 audio tracks of video, and video. 



J 

?.1 Ef^surathtiall tnformation convoyed with florid also avaJlabte without color, tor 0 油 mp[3 fr^m 

GOntexior markup. 




4.1 Ctearly [cftr^V lnth& natural Jangtiag^of a documents mvs. and any taxi equHraJents 

(e,g» F captions)* 




Si Organize documente^o tihey maybe mad wifliout st/le sheets. For example, when an HTML 

document la nanderad without aasodatad otyla sheets, i! mustatlll bo posslbfeto read the dbojmartt 



j ! 

6^ ErisurB ttvat squlvalents ibr dynamic content ara updated when the dynamic oontont changes. 



u 

7.1 Until usar apatite allow usere to oontml fltetoitnq. avoid causing the screen to flidoar ] 




14.1 Uae ihe dMmftt and aimpltidt ranguagd &pproprtate tor a cofttent 




And V you uee images and brngo map# (Priority 1) ] 

Ym 

No 

WA 

1.2 Provide redundant text linka for each active raglon of a sefver-eide image map. J 


: J 


3J. Provide dlenl-sfde image maps instead of server-aid® tm 孩 ge maps axoept where ttie regions 1 

cannot t>$<(oriried wlltt an avaiiabra 的 omatric $h&p&. \ 




And Hyou us« tebiM fPrtoiiyi) I 

Ym 

No| 

N/A| 

s.i For data tabres. icteatify row and column h^adera* 


LJ 


s.a For data tables that have two o『mofe logical lervelsof mwor column headers, use markup to 

assodaxe data cells and header cells. 

」 

U 

_1 

And II you uuftvmM (Priortty i) 


m 

WA] 

12 J, Tllf& tach ftBmoto facilitate frame klentification and n 掛 rigatfon. 




And If you um applets ind «cr(pti {Pitorfty 1) 

Ym 

No 

n/a| 

Erouro thal pages ara uubls when script^ appfots, or other pcogrammattc objects aie timed off 
or not supported. Klhlftis no! pcs^ble, provide equivalent irTbrrrafion on an altemafive accessiUa 



j 

And WypQ um mu Bnwdlft (Prkrfcy 1) j 

Ym, 

Mo 

WA 

1.3 Until user agents can automatically read aloud the text equtvatefft of a vfeual track, provide 如 
auditoiy d^scnptiorL ol the important irrteitnationQf iho visual track of a multimedia presentation. 




1,4 For any time-based multimedia pn&sentation (e,g ri a movie or anima^n), synchronize 

equivalent alternatives (e.g,, captions or auditory descriptions of the visual trade) with the 

presentation. 




And if all 61 m fate (Frbilty 1) 

Yte 

Ho 

. _■ 

11.4 If, after best efforts, yoy cannot cmala an accessible page, proivkSea link to an attematfva page 
that uses W3C toohnotogi 郎 • Is accessible, has equivalent Irrfbfmaflon {o 『 funcSoralily), sndts 

updated as ofidn as th& Inacc^&sibte (original) page. 



n 


2008 年 12 月11曰， W 3 C 公布 WCAG 2_0 V W 3 C 的 N 站了解释 
差昇 . 请至： http : 〃 ww\v-w3.Qirg/WAI/imro/wcag-php 查看 a 
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可访问性 


0 


0 



嚕••…这份列表好长昀 f 我昜 Audio -2- fro 两 
站大柢 S * FS 子才能与 WCAfr Priority 1相符 
艰……反芷我们 B 轻资力过？ 0 



WCAG 令人 望之生畏 • … • 但你所需 的改变 
或许不用这^~ 

WCAG 必须涵盖每种可能网站上的所存想得到的可能性 4 
也就是说，它要处理迕多或许不会影响你的网站的事项。 

最：®耍的一点， WCAG 的许多检迕内容应该是 f 尔已经完 
成的也项，例如“使用适合网站内容的最清楚与最简单 
的语言”。所以，列表上的许 多小项 巳经完成了！想符 
合 Priority 1,各位只需注愈 尚未完 成的可实施检 查项。 



磨笔上阵 


淸研究前页的检迕列表，或者直接上网浏览 WCAG 检迕列表 （hupWwww.w3.org/ 
TR/WCAGlO/full-checklisLhtml> a 写出使 Auciio-2-Gci 网站满足 Priority I的所有必 

须改变。 


+ l! i h + e # 
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仔细研究 WCAG 


磨笔上碎 
匕蘚答 


你的任务是找出 ihAudio-2-Go 网站与 Priority 1 相符的任何待办 
亊项 B 



1.1 Provide a text equivalent for every non-text element (e t g., via "alf, H lorrgdesc 1R t or in element 
content). This includes: images, graphical representations of text (including symbols), image map 
regions, animations (e.g*, animated GIFs), applets and programmatic objects, ascii art, frames, 
scripts, images used as list bullets^ spacers, graphical buttons, sounds (played with or without user 

intsraction) t stand-alone audio files^ audio tracks of video, and video. 


这了頊 s 经完或，效 fr )#® 侈加 
i ： 5也鸟 toh^desc 属 ft ' 


2.1 Ensure that all information conveyed with color is also available without color, for example from 

context or markup* 


这一确色枯®玲 C #« pAic ) 鸟 ©链 ( icon ) 。半箱 

评分的雀荃©索笱钱有问硿. . 注有，我们的网 

沒有毯衫 氽及付 么样孑？ 



这■"场有魚类似 tabindex …"•島吸 疼有兵 s 



所有金移❹倾的方 
式重规。 

鄉太4,值 ㈣ 料表 ㈣ 
起來也合铕含珑， 


分有魚麻烦 


> 


戰们迮列的 Audio — 2 — 如 * 
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可访问性 



r WCAG Priority 1与 （< 美国联邦康复法》第508节 
有什么不同？ 

^ i 有几项重要的差异，首先， WCAG 是由 W3C (万维 
网联踅)研拟的建议事项，虽然 W3C 没有强制执行建议的 
权力.他们却在思索标准，让残族人也能使用可访问的网 
站 & 第 508 节则是美国政府根据 WCAG Priority I 制订的必 
要事项，第 508 节要求所有政府机构以及承接政府业务的公 
司必须遵守这項法令^第 508 节并未强制规范私人部门，只 
要他们并未接触政府业务& 

:不遵守 WCAG 会被胬察抓吗？ 

答: 不会。 WCAG 仅是一个让网站可访问的拍示方针 & 
再说， W3C 没有速捕任何人（或收罚款）的权力，不过， 
忽枧 WCAG 就如同忽视一部分受众，这可不是什么好亊 Q 
即使花了好几天的时间才达到可访问性的标准，都可能对 
网站有巨大影吻。 


: 谁能判断我的网站是否合乎方针呢？ 

大部分由你决定。如果遵榍了方针并尽量让戍陣人 
觉得网站用起来亲切，即可自称为可访问的，因为第 508 节 
是法令规定，有些可用于检查并确保代码符合可访问性标 
准的在线工具。这些工具通常允许我们在网站上张貼“徽 
幸” ， 声 明你的 R 站符合第 508 节的要求 4 WCAG 也提供 
矣似服务> 

愆硌玎钫问性轼如同忽视一鄯分 
受众0对#、你的网蛄、你的用 
户都是一种伤害。 

拕玎钫闽性想成你设 i + 毎令两站 
的重六兵鍵。 


目前位置卜 301 



色盲 

我们已经知逬色彩影响怙感。似难想象没苻色彩的叫站是什么样 
子…… m 真的有些人阅览你的网站(至少部分网站)时看到无色 
彩的世界。所以，我们表迖网站上的一切时不能只依赖色彩。 


杨 终粤頌 

:本嫌竹什 ’ 令 J f f|fff 吁 方 衍 刀二 

也翊餘以 * 适彩的 


tetmcagyr ，■气 ■ -，■ _，：— 1 



il4Jki|i i^bv^ .4 學 4^-aM^n 


I tn j^^ -ffpgd^trt.fc»n 
r< ii Ihtf LEf^wvt pcrujibit 






这甚表 孑茧本 丰箱銲分的荃苓 ® 
f _ 根鸩谇分而 i 毯，泫杉44一 
k 捋洱分意义的方式， 这点 有连 
^ WCAQr 的建•: SU 
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可访问性 


网絡安全€的世界 


各位可能听说过 M 络安全色 ( web-safe color) 0 大多数人说, 
这些安伞色在不同分辨率与辟辎上看起来也是一致的。下而赴 
网络安 全色： 



色 f 齣世界 


这丧个碉毯扳卷来龙食不和似 …… 
你的用户秣港鉍鄉—科 ? 



使用上而的调色板 K 的符合“网络安全”吗？以下枭色言看到的 
相同调 色板: 


酋靄牖— 

你觉得色苜将如何影吻设计师对色赛 
的选择？三色或四色调色板能为色言 
提供任何帮助吗？ 



* 本否®偉出幻 \f isl 6 onc ^ ^ 

(/itip ^ // . visiSonc t com / piaducts / b^ow^e'thook htint) r 
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常见色盲类型 


色畜酿 Audio - 2 -^o 

让我 们通过几双不同的眼睛希希 Audio ^ Go , 因为正常运作的视 
椎细胞 ( cone ) 种类苻所不同，我们精心设计的 Audk >2- G 0 看 
起来可能完全不 一样： 



Jiidm 


Featured 


Sian Up 


vtvt 

r>r 


Listen 


■V» S ■ 

fK*' 4*， fc (eTl^ 

d^rfs ihiirim. ■ . 

iicVl 

8 I^PrII! 知 "■—l , 
■V 4 j h« v~ik ■ 


r hKt,h- 




s 1 ■! r ■ 如 w > 


tv^E 

： I^Nri 1 « 


W (- 

rrl l Lk i 


L'Zr»~r tH wr 1 ' MAI 4 M IT，± ^ 

Jii !h i| v '^it a t a > h i fVTWkt I , r \|L :»*n1 i 
■. ifii^ MfmM « C^i^ia wd t l« fifl 

^-■.L 1 v p I -fc> ， dil "ii k cr. ,mr 


Download 


-I 於 

fnr Mrt 


hr 

i .fi nun? PjJ 




这袭沒有毽右的人所忍的琢埏釔含 


原瞄 



这个魬本的纪适変化大幅銪 
滅.伐大多數两页无棄这袅芍 


(^WMTm 恤 Bi-mH mWS^ Ml 

a 垆 vnul p% 1 » 4-fv^J ii 

f _ i BApI I^PV h-HI _ 


Featured Books 


以分辑 


o 
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绿色畜（铥苞感知錄隹的视錐) 
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可访问性 





较少见的毯 t 类埂, 势响 
黄毯设 & 雀荃的 运钐在 ci 个 

版本龙全乇垃 . 绝对违籽 

J WCAQ Priority f c 


d^gn Up. 

1 Eb ■ mm M m r.\ >Wd>^ |i"4^V * »J 

— ，. 斗 iib • 通 ■ ■ hr* 4-* ■p»h<%^^S %]> 1 »-«i 

I，/ ， pr» ^ FW-ibl EttlihFV^P ■- hi I 丨 — 一 # i 


■ f-mn U BB I *1^^# *«■! hAa# IP#ri -I -fe^» ^ 

hr 通 if — , >b%k 4|#ri4rf-» hri W - 

■«-# -JT riflV# H'lP ii mii.Wj,#- ，》V 

.WW J -Ip# » ― 彳 卜 _ihj 

«i %**i I m VI™ p i* -* I s««-i ■甲 sVt rf a--* 3 ■ 1 


Featured Books 


lirrrsa mk i 

| d ^ mMn 

羼 S e 




u.u^ 


F»*# - ib 


iJ* bi -<■•« ^l,a-^ fl Jr^ ^*^P & ■- 1 1^ i 

j^rli~~ mm\~imA ~~bT tr m ■■■■■ -■■-^'^ri^ 

,■*■■ iirfiW^ 一 |.-® 4r» 

^ Wj « t^mi HV^ «"k^«jyi Hn-ll-HJ 9 di ,ifi H# 

l<L^rr4f a'k^-r, iilJMfe- ^| f ■■■ .#L>- P ' 
f.i -if d r •>!«.• WAi * uVi^iif I 


链隹畜（絲氐感知 Si 的视锒) 


/Wfu I 


釭毯言 S 到的 Audio - 2 - C^o ^ ^ 
色言 £ f _) 的非常相鉍 。 网吞看起 

来祐壊； E 味，荃！©索的达缘似 
令夸焦 mm 。 




釭龟窗（錶忘感知釭隹的视雊） 
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标明星星的意义 


那些星星是大麻烦 

Audio -2- Go 使用的星虽图案造成丫问题。 H 星星有颜色”这点其 
实还不错，问题在于只通过颜色传达某些信息。你还记得修正不 
良阁标或导航的坡简筚的方式吗？对了，加上文字！ 

关于书箱的评分，只需简单地加上文字 版评分 佶息。然后把星星 
图窠设为 Wft 图，就像第6敢中处理导肮与图标的方式一样， 


/></a><br /> 

加入分行符咢 . 
^ Vj * ^ pflK 核签存 


<div id; 1 .featured-books M > 

<ul> 

<li><a tabindex=__7” href='Vbooks/l ,f > 

<img alt-"the elements of cooking 11 src =1, elementsopg 

<span clasting high // >Rating : 8</spaix> 

</li> 

<li><a tabindex— M 8 M href— ,r /books/2 1, > 

<img alt =1l state of denial" src- M sodopg M /></a><br /> 

<span class="rating medium^>Rat:ing : 5</span> 

</li> 

<li><a tabindex= 1, 9 M href= ir /books/3"> 

<img alt= ,r the google story” src= ,t google*jpg lf /></axbr /> 

<span class—^rating medium^^Rating : 6</span> 

</li> 

<lixa tabindex^^lO 11 href- r 7books/4 1f > 

<img alt- M mary poppins" src^^mpopg 11 /></a><br /> 

<span elass=^rating loM^>Rating: 3</span> 

</li> 

<lixa tabindex=’’ll’_ href=_Vbooks/5"> 

<img a It-"business of creativity" src=’’creativity-jpg__ /></axbr /> 

<span cl a ss="rating high 〃 >Rating: 9</span> 

</li> 

<li><a tab!ndex= M 12 M href= , Vbooks/6 M > 

<img alt— T1 designing web usability 1 ’ src="dvju.jpg” /></a><br /> 

<span class="rating medium 〃 >Rating: 6</span> 

</ul> -- 以孖抬 • 爯棵戏讶分添如奇以 

</div> ，辠， （分約冶 ⑽， meiiuns % hi^h) 0 

没有 0 问毯 



index.html 


问 


以后都不能使用视觉的指示工具（例如星星）了吗? 


可以使用。但是不能只用视觉指示工具，如果你用视觉元素表现温度计， 
則需在溫度 if 旁加上文字说明。 


306 第8章 












背景裰像 4 是你的好朋食 
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可访问性 


利用 CSS 与 background 特姓，现在可以把垦 星图窠 放回网页了。 

I 相此述需要为样式丧 screen , css 添加一些规则： 

# featured-books lx • rating { 

padding : 4 px 0 4px 30 px ; 名 

font - family : Helvetica , sans - serif ; / 

font - size : small ; 谇分类則 的在划甭留下 

text - transform ： uppercase ; 的逆绍，与荃屢囝案 

} 4下空问。 1 

.high { 

background ; urir ^/ images/star _ high , png *) no™repeat left ; 

} 一 

^medium { 

background : urJL (\,/ images/star _ medium,pngM no^repeat left ; 

1 孩孩类糾 ， f I 将 g I 现遠劣的色 I 。 

*low { J 。 

background : url ( r ../ images/star _ low ^ png 1 ) no-repeat left ; 

} 一 


我们 fj 韌的诉分系 
统桿式类1_)。 



screen xss 



有色彩，但不依赖色彩? 



沿 H 新你的 index . html 与 screen . css 。 然后 M 新加载 AL ! dk )-2 -Go 的网页，检盘 . 穿一 

书箱 评分的 功能。 叫 


㈣ 5 


Vi 」 


Featured Books 


■HTIL 


Google 


今 VV RATING: 8 

1 


RATING: 5 


RATING ： 6 


待办事场 


- — 「 

_ ,. 呢 

糾 m 來刪心樗式 


目前位置 
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内容顺序 

除 Jfabiwdex ， 还有更多峨序问遜 


梓办寧項 



我们已经使用 tabindex 厲性来确保 Tub 键在网页文件中的移动顺 
序 lK 确。但 WCAG 的要求不只 如此： 既然某些可 i 方问设盔不会使 
用标准键设，文件的实际标记 （ markup ) 也该依序出现。 

换句 iS ■说，想满足 WCAG Priority ! , XHTML 必须依照丧卷内容 
的理想顺序来徘列，不莳是否有 CSS 与 labindcx 的辅助。 





獅雜 卿式表 








-^Masthead 


Content 
Footer 




Header 


这个网玷几呼把内窖排存角 
苟 尤棄后……它或诗用 css 

沾‘足 WCAQ 的 S 求 。 


$ I 采用和同光黃 f 。 



与标准相符的 XHTML 不表示同样符合 WCAG 检査列表 6 ; 

W 

9- 

网站采用合格的 XHTML ， 只代表你的标记正确无误& WCAG 检查列表则确保 : 
你的 H 站标记尽最大可能地满足最多人的可仿问需求$两者冇.表关联，但不完全丨 
相同。 f 



注意！ 
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可访问性 





又到了 Audio-2-Go 网站解决 Priority 1检查项的时间，以下是 Audio-2-Go 网站 
的 index.html 的必要部分。重新安排其中顺序的工作就交给你了.祝各位一切顺利！ 


<ul id= ,r nav> 



tAbindex 盌供5 — 曲排 序信总 
fS 核记的索择戍存不正錄。 


<li><a tabindex='T title= M homepage u hr 0 f= ll index-html M >Home</a></li> 


<li><a tabindex="2" title= (t browse books" 

href= ti book ： s*html lt >Home</a></li> 
<Ii><a tabindex= ^3title= M about Audio2Go BI 


href- ,, about-html M >About</ax/li> 


</ul> 


<div id= M featored-books u > 

<ul> 

<lixa tabindex= w 7 w href=_Vbooks/l_，> 

<img alt="the elements of cooking 11 src= 1l elements.jpg l * /></a></li> 
<li><a tabindex= 〃 8 〃 href=’Vbooks/2’_> 

<img alt= u state of denial" src™ M sod.jpg M /></ax/Ii> 

<li><a tabindox=^9^ href= ,l /books/3 ri > 

<img alt="the google story 1 * src= ,r google,jpg 1 ' /></a></li> 

<Xi><a tabindex= #, 10href= T, /books/4 n > 

<img alt= ,, mary poppins 11 src= M mp.jpg n /></a></li> 

<Ii><a tabindex="ll 〃 href= ,, /books/5 ,r > 

<img alt= M business of creativity 11 src =1, creativityopg ,f /></ax/li> 
<li><a tabindex— r/ 12 w href=_7books/6’’> 


<img alt= M designing web usability 1 ' src=’ f dwu.jpg_ r /></a></li> 


</ul> 

</div> 

r m _ 

<div id=__info"> 




0 


<h2><a tabindex="4" href="signup f, >Signup</a></h2> 

<p> Create an account with <strong>Audio*-2-Go</strong> and begin 
downloading books immediatly. All you need is your email address and 
a credit card to get started and there is no contract to sign. Cancel 
anytime you wish,</p> 

<h2xa tabindex=href= ,l download 1, >-. -</b2> 

<p>. ,.</p> 

<h2><a tabindex="6 〃 hreflisten.’>" «</h2> 

<p>” ， </p> 

</div> 



index.html 
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M 新思考 tabindax 


习越解答 


你的工作是重新安排 Atrdk^2-Go 网页中的块顺序，使得网页不采用样式编排时，我们 
在元素间的移动顺序更符合逻辑。以下是我们的成果。 


<ul id- n nav> 

<li><a tabindex=”l" t:ltle="honiepage_. href= ,T index.html ,r >Home</a></li> 
<li><a tabindex= t, 2 ,f title =li browse books 11 

href^ 1, books*html ,t >Home</ax/li> 

<li><a tabindex= f, 3 ,t title= M about Audio2Go ,i 

href=’’about ,html.’>About</a></li> 

</ul> 




<li><a 

<img 

<lixa 

<img 

. <lixa 

<img 

<li><a 

<img 

<li><a 

<img 

<li><a 

<img 

</ul> 

</div> 


的该 I * < Av > 鸟 ^teatu^ed^&ooh^ 〈6> • 

巧4来启用样式表或祥式表乇法用时，一样彳 i 轲 
英 I 现 d 必砥啓 。 


<div id: 1 嘗 featured«books"> 

<ul> 

tabindex =l, 7 ,1 href= t Vbooks/l 1, > 

alt =ll the elements of cooking 11 src= T _elements-jpg" /></a></li> 
tabindex-^S" href= T, /books/2 M > 

alt= rt state of denial 11 src= lf sodopg ft /></a></li> 
tabindex="9._ href= ,l /books/3 ,t > 

alt=”the google story” src 含 ’’google.jpg 1 ’ /></a></li> 
tabindex— M 10 M href=’_/books/4’’> 
alt= n mary poppins 11 src= M mpopg 11 /></a></li> 
tabindex= ,f ll ,1 href^^/books/S 1 ^ 

alt= fl business of creativity' 1 src= M creativity*jpg ,f /></a></li> 
tabindex;,.]^ 1 ’ href- IT /books/6 u > 

alt—’designing web usability 11 src- M dwu*jpg 1f /></ax/li> 
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可访问性 

- mm - 

我们不需要讨厌的 tabindex . 

整理过 indexJUml 后宽新加载网页。网页看起来应该一样，却已经与 WCAG 相符。 



值用 Td 鍵甚个检跆 
网玷枒记梆序正磘的 
孖方法.甚 it ! 用今 
加入錡分 S 的怵况。 



WCAG Priority 1使我们不再需要 
tabindex „ 

Ml 

标 U ! 排序正确后，请从 index.html 中移 
除所有 tabindex 屈性不只是因为这个 
厲性不再必要，还因为这能让你确定使 
用丁 ab 键时的移动顺序是否正确。 








我们法硪 J 刊表 f 
的所有亊砀。工作 
结荣了哂 .， 


I. j E-fil t Hiia. 

cjkM b^SOiLl aifUS^-dlAifE^ . Ail Ji-OIj Wfil il 

vuiif r.ni.1 «dilr*i# aih] * cndil n^ferJ Eo |rt iluipy] 
*tm! vSil-r li n 4 -M 4 iEYiKl I.- 0 ! pi^h. C*icvt 
声 || i ■誠 


Download 


Ow« frf*Lf fc>yp *i^ro^n 4 rufe 
Wlf ffwl^ h'f WfcT in I P<aJ 

Of Qllwe friJiiHb |ili>f ? A-aIhU» 

iJw I ,pci ip y^rut pi>rc 3 t«w ， w fmt an 
神 uf |p£kiL_ ■! tiiryf. 


LI»lon 

|\L| 眘 f WUt _nivk>i 相 f w 

^f^iiiruiinut aui&r( 

4 ?kI rdi"e-J m ir^ft pcwiuflMa. 

| E*rvl* ^iwmrfi^ Ami ia-3 .f_k> 1 h-F jct^yin 

ol#y4l>*pi|%ioki ■injnvhf rr il pckLibib^ 


☆ hir 麵 ） 


心 ^liV? 5 






☆ AAlIkO « 心 ^ATihO 
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表格头 



^ook^l Audki2Co 




iA 4 


Go 


BOOKS 


-j 1 


Top Titles 


The Black Swan 


Presentation Zcq 


The Digital Pbatcjgrapby Book 


Featured Books 


ii9-W 


tu-w 





STATU 

OF 

M X J A [ 



Mac OS X Leopard: The Mining Manual • u 柄 




☆ 




The iPhone Developer's Cookbook 






☆ 


l! 
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磨笔上阵 


对 "Books" 分 E 的网页而言，锯要完成哪些 WCAG 检査项？翻回笫298页（或 
上网），看看有无适用的额外检查项……淸在下图的“待办車项”列丧上注明待 
办亊项。 


M. Top Titles 必须 

处理龙的寧項。 


為所有邾玄字太*接俱钧夂谟明主 

所有毯衫作 总也必须锥以 乇毯衫的 
方式璽现。 

纽织 *#• 僅 立件存 没有梯式表的 
该起来也舍伐含理。 


提吞: 丁即列表4个表格 c 



找出 Books 网页所需完成的事项后，谞打开 books, html。 这个文件应该在本章的 
下载文件里。更新 XHTML， 使它与 WCAG 相符，并符合 Priority 1的检查项。然后翻 
开下一页，看看是否找出了每_项。 
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检査可访问性 



习瘅蘇答 




II 


> e r, content =’’ text / html : 赖你士冰 你 • 

stylesheets/screen.cs; 起来也:件澹泫有祥式表时读 


你的工作是更新 XHTML 文件 books.html , 使它与 WCAG 相符，并符合 Priority 1的检 
查项0 

I 舶_ 

<!DOCTYPE html PUBLIC f, -//W3C//DTD XHTML 1,0 Strict//E 巧斯有非龙字充纛#俱 ® ; 令 

^http://www,w3.org/TR/xhtmll^ 布雌 子 

<html Mmlns=.'http://www.w3.org/l999/xhtrnl” xml:lanq- 9f 4 新有洛彩 fll 必猫叙条必* £ 衫 * 
<head> 式里现 衫的万 

<title>Books J Audio 2 Go</title> - - ' ■. 。彳 

<meta http-equiv= tr Content"Type r, content= ir text/htm" - - 

clink rel™ r, stylesheet T, href- 
type=" text/css" media 

</hea6> 

<body> 

<div id =1, wrao"> 

<div id =’_ header ’_> 

<hlximg alt= M Audio 2 Go logo 1 ' src-^images/aij 
<ui id=’’na\;，_> 

<li><a title=''Audio 2 Go home" href- M index*htm 
<lixa class= t1 active ,1 title^^Audio books" 
href =,, books .html rr >Books</a></Ii> 

<li><a title=’’About Audio 2 Go M href= 1l S t, >About</a></li> 

</ul> 

</div> 一 

<div id- M book-list t, > ^ 

<h2>Top TItles</h2> 


〜 h* ^^ j - r j "- • J( ；jj J jj J *W^I , '*■ I ♦ 

M 有表格常有行細与对杉通 




-■ -m-' 

- if 


Boofes 莉否 i 充表格 
我们必领加土表格紝短。 



5,t For data tables, identify row and column headers, n 

<table 

<tr> 

<th>Book Title</th> 

<th>Price</th> ^ 只甭罢加入一行 • fi 的各糾的 

</ tr > 杉赶印 - 

<tr> 

<td>The Black Swan</td> 

<td class- ,i price">$19.99</td> 

</tr> 

<tr> 

<td>Presentation Zen</td> 
ctd clas5= ir price’_>S12.99</td> 

</tr> 

<tr> 

<td>The Digital Photography Book</td> 

<td class= 1, price ,, >$12*99</td> 

</t r> 

<tr> 

<td>Mac OS X Leopard: The Missing Manual</td> 
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<cd class^ 1, price ,, >$l5,99</td> 

</tr> 

<tr> 

<td>The iPhone Developer f s Cookbook</td> 
<td class- M price ,f >S19.99</td> 

</tr> 


<tr> 

<td>sl ide:ology</td> 

<td clas£= if price n >$7,99</td> 
</tr> 

<tr> 

<td>The Numerati</td> 

<td class= ,l price f *>$ll-99</td> 
</tr> 


<tr> 

<td>Spore: Official Game Guide</td> 
<td class= M price ,l >$21-99</td> 

</tr> 

</table> 

</div> 

<div id= r, featured^boo]<s ,l > 

<h2>Featured Books</h2> 

<ul> 



这个阏页 S 经正錄地将 
序，5有杉疲.然后昱 
Xo*p Boofcs 列表 ， 爲來甚 
Earned Books 利表 。辦 以不 

霉重 斬排烊 a 


<lixa href="books/T_><img alt=’’the elements of cooking 1 * 
src= tl images/elaments*png' 1 /></a> 

<br /xspan class= M rating high ,1 >Rating; 8</spanx/li> 

<lixa href= M boofcs/2 l, ><img alt 兰 "state of denial 11 s rc^ M images/sod # png 11 /></a> 

<br /Xspan c 1 asting medium f/ >Rating : 5</spanX/l i > 

<11 ><a href- M books/3 ,f ><inoig alt= n the google story M src- rr images/googX8.png M /></a> 
<br /Xspan clasaerating medimn^>Rating : 6</spanX/l i> 

<li><a href™ ri books/4 Tl ximg alt =1, mary poppins" src= n iTnages/mp*png M /></a> 

<br /xspan class="rat：iiig low w >Rating: 3</span></1 i> 

<li><a href^^books/S^ximg alt= l, business of creativity 11 
src =,1 images/creativity.png M /></a> 

<br /Xspan class="rating high 〃 >Rating: 9</span></ 1 i > 

<lixa href= ft books/6 ,r ximg aXt= f, designing web usability 11 
src~ f1 images/dwu,png M /></a> 

<br /Xspan class=^rating medium">Rating: 6</span></ 1 i > 

</ul> — 

</div> 

<div ld= 1l footer ,1 > 

<p>Copyright &copy; <strong>Audio 2 Go</strong>, Inc” all rights reserved.</p> 
</div> 

</div> 

</body> 

</htmi> 


这部分的故变方式 
锌分 f 龙丈孝•不 
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可访问性总结 



测试 Audio -2- Go 的可访问性 


实现 可访问 性的措施确实很好，但我们也需耍测试网站^该怎么测试呢？嗯，存儿个方式: 


取得协助残障用户的技术（例如据嵇阅读器），&己动手测试网页。或者逛更好的 

方法. 使用 Cynthia Says -^这类 软件可 动检进网站的 WCAG 相 符性： http :// www , 

contentquaIity.com 

谤更新上页与 Books 分页， 沿看 Audio-2-Go 修改后的成果 a 





用辁诎跃件 C^nthU 


fJidfrOlOflOr 




Th* Niun« 『廡 1J 


Spc*re ： 0C™J Gww 




*»fc« 


V AM |喊 


☆ fiATiFfl ! 


HATMO 


Audio 


SFgn Up 

Cf»[« iC WKUH with 

>«nr emiil ^ddbr«# tnd 
wi tb^f t i» no o?n( r*ct 


'§m 




__j_ : _ . 


Download 

Oncv you ct«!c jTflur act 
oyf - blsJb.-ipHUty 
urolkr M Pa-evmj>ilJM 
fdm tflfij yO^f fnxlT 
do'wnJo^d >T 3 ur bocki l| 

UttM 

All of our booki i 

ve-trt weto 
dcfinJiifn Audio i 
«ad n^ticu£<»u9]> , edited 
l-tandi ^O^m, Audi o-2 
ef iudia bookj utjtp 
qyaltly^. 




Q' 




HOi/E ； 


Top Tltlfl* 


FiMum 6 Books 




Tb« KlKkfMlA 




*HW 




1 T» DJffuJ Boolt 

MacOAX Leopard- Th# .Mj«iax HunuJ 
The LPbone Pr^loprr'f C»kbook 


Goyglej 


☆ fUTHO # ^ fatwo & fUTwtO 4 
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- Labels 


Abo^j 11 hosej fn ks 


可访问性 


moo 


Gmail • Opportunities with the Internal Revenue Service 

_■__ _____ 




Gmail Calendar Documents Photog Reader Web more 


audio2ooQomail.com | Settings 


GMdil 


ComDOSD MaiJ 

Chats ‘） 

Sent Mait 

Drafis 
則 Mail 

Trash 

Contacts 
-* Chat 

Search, add t of invite 

• AjlkSo 又 Go 

Set $tatus here T 


Chat with your AIM® 
buddies 

Get started 




k Back toJnbosc ( RftponSpatmJ { Dototo) Uoro Actions ▼ 


Say goodbye to taxes forever I 


In&w [)C 


Audio 2 Go show details 11:43 AM (4 minutes ago) 4^ Reply 
Audi 0*2^00. 

Great work on vour sitel 1 had our team look at wfiat yooVe 6om a and we 
really love tt. We ran it through 油 of our vslklators, amf youVe go\ vaM 
XHTML, and youVe met WCAG Priority 1. Nice wofW We’d Ute to move 
Ibmard with di^nbuint our tax loims. We're in a bit of a budget crunch hea 
but we've come up with some creative Ideas to compensate you for your 
work. Wtiat woutd you thmR about you never paying taxes ogam? As long 
as you*l( our forms, consiitr yoir$etf a tax-trw entity, Enjoyf 

fc and by the way... It you have any emptoyees oc contactors, we're 
wiling lo give two of them t!ie same tax 奋 ee exemption you'd enjoy, 
worttl 


Best t 
Ronard Dauti 
Entemal Revenue Service 


力迮弓沒问作网站 £ 


R 如 [v ♦ Forward 


OPl^s 


Co^act 


lOHosii^^Bock 

ThisH< _ 

Fdr You 

mm 

ToxVi|^^^Bssk>fL4il 
rnlcrp^^KTiD & Bftrk 
www, NtsUrik.com 

Edahp Tax Exempt Fund 

No lOCHt^L floral ftltemftUtfft 
or Idaho slatQ Ircome ⑽ fur<s. 
atutna ccm 

1031 trtvostmafiu 

VVe Mata：h Iftvostors To 1031 Property 
Contact Us For Free Irfo. 
wwWiSun ExchangePrc pcftlosjc om 



目前位置 ► 317 





























































































看起来不错 




JAWS® 悚# 诽枳 
Atreflo^OD H t 总的 
■ftlE 好多 7 , 




复习要点 


劣咸 WCAQ 松杳场 ! 


碲彡葶磺 


Sign 


_ _ _ — 一 tr tvif m I .pu m fc ,i,, 

-- - 


jLf ^>ur M¥%iUJS| JCni CU i 
■ AiAd«o GLn 3br um y 


: 


m 可访问性是为残障用户创建他们可以顺利使用的 
网站所使用的过程与技术。 


■ 屏幕阅读器是盲人与视障用户使用的软件，可以 
大声朗读网站文字。 


- ALT 厲性 （ IMG 元素的一部分）可为图像提供替 
代文字——屏幕阅读器将朗读的。 


■ LONGDESC 是 IMG 元素的厲性，当图像说明太长 
而不适合用 ALT 属性时，此属性用于链接到存放 
图像说明的网页。 

_ 手部运动技能不佳的用户通常使用 Tab 键代替鼠 
标来在网页的链接间移动。 

■ TABINDEX 让我们手动指定链接的顺序（用 Tab 
键移动时）。 


m W3C 提出的 Web Content Accessibility 
Guidelines (WCAG) 是为可访问性设计建立方 
针的首要成果——共由 14 项方针组成，每项方针 
包含三个检查项。 

« 无需担心 WCAG 检查列表里不适周于你的网站 
的条目。 

■ 组织网页的标记顺序，使标记在未经样式表编排 
时也能读起来合情合理. 

■ 对所有使用色彩传达的信息霈要确定它们在没有 
色彩的状况下也能表达。 

■ 如果网站上用到表格，请确认表格的行与列都有 
标题。 

■ 利用 Cynthia Says 这类软件检查网站的可访问 
性. 
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命 

% 


和谐设计之道 



鱼从孖跆认真傾咁用户的心声后,大 
象再也离不#我的网站，最坻躲快 
浪时问注葱 其他统 if 数揭：？ e 


良好的设计就是真的听到用户的心声。你的用户会指出网站有问题的地方、 
做得好的地方、 （必 要时）如何修正问题以及如何改良你的网站。 柯许多 听取用 
户怠见的方式。可以倾听团体意见（利用问卷调査等工 A ) 与个别意见（采取可 
用性测试等工具），以及了解关于网站的集体行为（使用网站测贵与统计数据等 
工具）。无论使用何种方式， m 点都是“倾听 M 用户的心声 。 如果认真聆听，你 
的网站会满足受众的需求，菘至还能更加完 # a 


进入新章节 319 




不时传入 「 pm 的（不好的）评论 


淹浚 RPM 的抱怨 



我一盥钕到 生气的 畚户窃來的电手姊许 
他们对 R 站邾布相商的孢怨 。 你帮我戗？ 
达个 R 站-—现在我 必锘请 你蘚决这今 
闷翅……诂好好 蚝修庄 


0 




你们在哪里 


Bummad Custonwr <bumm«cl@y*1>oo.co)Ti> 

To ： rpmmvsK @gm^r.c&m 


Wst 旁 迮人： 

t 违不崤 1 9 有个 h t 戎代亡 f ] 的杈略 

T.KA\L^ 


New at RPM Mimic 


GMail 

Mri A % _<fcr fi ? T «* 


Thanks. 

Qujtmtui^ r~ 




N 

(心•作不孖的) 
RPM 碭片行 

老板。 


Gc 3 ai ! 


APM Muvlc 郊爪賴咖 ® 3 卿 




新网玷的问题 


Aug »,姊⑽妗 


工― 




七 




Thanks. ^ 

Coacemed Custer 
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Cart 




' 1 

- - 4,^. Vi 




懸 


H : 


-，■ r ■ I < 




I 




tihe Blofl 


rom 


目前位 


= 以以二 * 


SM% Aug 23 , 2008 At 4:11 


Angry M. Lov«r <lov&hal«©your1inks.com> 
Jo: rpmmy sic .oom 


rpm rit * 


{? Uii 是 t 么馑坟上 4 w rpm 衿七蛟 ， +i ^ fj , # 


上 Ht +, fi 3 r , A «1 EipkKff - fc , 仅*良 t 八螬， 浼 W ] 葶*电 Ji 表 fMl «谍祀長西 I # 




抓崎玖测 S 初 4:21 PW 


新网站让人失望 


Thanks , 

Aiigry Mustc Lover 


R p W Muilc < xpmmu a i C @ gmiHUam > 









问卷调査与焦点小组 


遍过问卷调 壸鸟焦 点小组 
倾咁受众的心声 


设计,重新设计或修改网站时，都需要向受众提出一些问题。受众是 
谁？使用网站的频率如何？平常用什么电脑？对网站现行设计有何费 
法？是否葚欢新设计的提案？ 

此时，热点小组 （focus group) 与问卷调査 （ survey ) 可以派上用场 。 
两种研究 ： C 具都是听到受众 K 心声 " 的好方式——让受众说出意见、回 
答你的问题，甚至以窓想不到的方式提出反馈意见。了解问卷调査与焦 



【》 t +f 


点小组各自的优缺点非常 m 要，甚至可以影响采用其中哪一种的决定。 


一起看看它们的优缺点: 



at & 

缺点 1 

闲 

卷 

通 

壷 : 

参与研究的对象需付出的时间相对较短 

需要许多事前规划 

" f 对1午多人实施 

问卷的填写对于识字困难的对象可能造成_ 
问题 1 

可通过许多方式实施（纸上问卷、在线问 
卷、电话调査、 面访） 

调査问题可能被误解 | 

参与者通常能利用空闲时间完成问卷 

I 

魚 

点 

小 

姐 

允许参与者互相朴强彼此的意见 

需要参与者付出相当长的时间 | 

针对非常特定的主题对有想法的人收集信 
息 

: — 

获益于受过训练的促进者 

公开场合或许会剌激一些参与者 | 


需要受过训练的促进者 | 
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倾听用户的心声 



磨笔上眸 


请研究下列案例状况，判断取得所需信息以作出设计决策的 
捩佳方式（问卷调査或焦点小 组）。 

请写下你的答案 


状况一 


地方社区的电视台庙你设计他们的网站。客户想加入效 
果酷炫一但带宽密淇的互动 Flash 均影片。你很担心 
额外的媒体对干网站的用户有点太过头了 6 


你 需要找 出电视台的收看用户所使用的电脑（制造商、 
型号、操作系统 等）， 还要知迫他们的连接速度（拨号、 
DSL , 光纤等） & 在他们使用网站时，网站不会因为提 
供众多丰宫的媒体内容而垮掉。 


p 

状况土 

你为市氐社区中心义务设计网站。但对干网站的用户 
没有什么概念一例如他们的性別、年龄、电脑型号 
等，而且你需要找出这些信息，才能针对正确的层次 
进行设计。社区中心的主管提醒了一点，有些诩户的 
识字程度可能 偏低。 


状况三 

你和几个朋友打算推出一个新的社交网络，目标用户 
是网站设计人员与开发人员。你已经想出儿个不同的 
视觉设计（都是非常漂亮的分镜表），现在擗要了解 
潜在用户对子网站设计的特殊意见。你也非常确定你 
的受众（他们本身也是设 计师） 大槪会想与你分享一 
些不错的设计构想。 


目前位置 ► 
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深入了解问卷调査与焦点小组 




磨笔上阵 
薅苓 


让我们來看看是该为毎种状况选择问卷调査还是焦点小组。你 
如何选择呢？ 


状况一 

地方社区的电视台鹿你设计他们的网站，客户想加人效 
果酷炫一但带宽密集的互动 Flash 与影片。你很担心 
额外的媒体对于网站的用户有点太过头了 5 

你需要找出电视台的收看用户所使用的电脑 （ 制造商、 
型号、操作系统等），还要知道他们的连接速度（拨号、 
DSU 光纤等）。在他们使用网站时，网站不会因为提 
供众多丰當的媒体内容而垮掉。 


状况二 

你为 市区社 区中心义务设计网站。但对于网站的用户 
没有什么槪念——例如他们的性別、年龄、电脑型号 
等，而且你需要找出这些信才能针对正确的层次 
进行设计。社区中心的主管提醒了一•点，有些用户的 
识字程度可能偏低。 


状况三 

你和儿个朋友打算推出一个新的社交网络，目标用户 
是网站设计人兄与开发人员。你已经想出儿个不同的 
视觉设计（都是非常漂亮的分镜表)，现在需要了解 
潜在用户对千网站设计的特珠意见。你也非常确定你 
的受众（他们本身也垃设计师）大概会想与你分享一 
些不错的设计构想。 



间卷谒杳注合从犬簀辟众那 


问眷调嗇 




i% 



魚点0•纽或闷卷调臺 


■I ：!； ■彘# 


此岛_>姐付你。 
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问卷谪蜜:鸟麄点小组#非兔费 

决定采用问卷调査或热点小组时，还有另一个因素需要 考虑： 成本。 

如果你开姶用户测试时大槪知道问卷调查与焦点小组的相对花费. 

这或许有助于决定正确的道路。 


问卷调査 

S 设计问卷的时间 



时间弒差舍钱。 


$打印与邮寄（如果实施纸上问卷) 


$ 处理与解析调查结果的时间 


$ 对受访时象的可能津贴 


焦点小组 


规划聚焦团休时间表的时间 


召集参与对象 


_们不鈦打矸 n 链值抓个踣人铤访 
问—你脔龙尨很多吋问鸟粍力去 
5 #秸代表两站壹众的人& 



租借容纳焦点小组的场地（如果你本身没有 场地) 


生斿人炎 t 保熬) .姐 
注作—一他们 A 冶兮 
铤的搴袅惠技戧的 , 

邊常不使宕。 


$ 





设备祖用（投影仪、屏幕、录音设各等) 


茶点与参与对象的津贴 
处理并评估结果 
任何额外补给品 
培训主持人的花费 



當不免給钱 . 

布裉龙谏参島対象矻比存及唤 _■■* 

枚枓喝？ 




磨 笔上禅 


各位已经了解问卷调査与焦点小组的优缺点（及其成本），淸笱下 


你想用干取得 RPM Music 网站用户反馈的方式。还有，请写下采 
用的原因 & 
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采用问卷调査 




磨笔上搏 
驊答 


取得 RPM Music 网站用户反馈的敁佳方式是哪一种？为什么？ 


我们的想法如卜、 




问舂调杳! 


用户的 
於噱盞 


戧们 f 麝故猙來 tl RPMWWie 審户的意越多趙玲，布 II 花费趙少起銬 (诔 记往 ,戧们也屢 
让老板孖 <0 。 另外，采用问卷课杳也 gw 性猓刑 笵 S 和稱作系统的信 J & —对子解決鋏 ff ] 的 
同通芍拥有帮助。 


线问 巷， t 1 •用户4线试写 tfc 



问卷 调查便 宜而有致孳， 
尤其 是调壷 对象能选搀在 
线完成问卷时。 


你想俅闲问卷进蛮技出问趄的格 






崎起来不错 


你可 


冰使坍我的害户数描库 




们取得联系 
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本周 主题： 在线问卷的告白 


Head First ： 欢迎在线问卷 （Online Survey ) 。 

今天我们非常高兴能在万维网以外的地点访问到 
你 。 

在线 问卷： 財啊，與是让人兴益！我已经好几年没 
有以油墨印刷的方式出现了 

Head First : 跟我们讲一下，为什么做了移到网 
络 （ IntenKM ) 的 重大决 定呢？那些标签与超文本 
似乎布点让人头昏眼花。 

在线 问卷： 这个嘛.感觉上是理所当然的决定。没 
错，刚开始设迓在线问卷要花点 时间， 但接下来 
只要也着领，数据会自己送匕门。 

Head First ； 你会觉得改成网页后，比以前印成 
问卷纸的形式受到更多关從了吗？ 

在线问卷；绝对是的 6 大家看到问卷纸，难免会联 
想到以前岛中考试的不愉快经历。还苻，在线问 
卷也让大家能利用闲暇时间填写。你知道，这样 
不会有汪力 & 对了！如果问卷很长，还可以保存 
答案，稍后再完成 & 

Head First ： 这样真是方便啊！你这些数据保存 

到哪儿呢？如染有人没写完问卷，问卷会去哪 M 
呢？ 

在线 问卷： 有时候我只要 f 专送_封带回答的电子邮 
件。不过，大多数时候都是把一切保存在数据庳 
里，以便 P 后快 速査符 答案。 


Head First : 哇！听起来真是高科技！你该怎么 
在管理这些技术的同时又能维持时尚的外表呢？ 

在线问卷 ； 偷偷跟你讲个小秘密〃我既不是技艺超 
群的程序设计师，也不是数据库分析师，如果過 
到复杂的问卷调査，我会利用众多免费的调齑工 
其。它们帮我设定问题、格式，甚至包括处理过 
程、数据，然后把结艰寄给我 5 燉后则由我接受 
大家的喝彩 a 

Head First ： 很有趣的秘密。你不觉得没冇全锅 
自己做市，冇点抄捷径偷懒的味逍吗？ 

在线问卷 s 如果你想整天都编写代码与 HTML 标 
签，那是你的亊 。 不过，时间就是金钱，我只想 
傘到回答妥当的问卷，我没有时间处现所有细 

I 在线问卷不仅节省用户的时间，也节省我们 
的时间。 

Head First : 听起來有道理，而 _0 L 谁能抗拒彩色 
图表4图片呢？ 

在线 问卷： 绝对不是我，相信我，移到在线此界是 
我人生中最好的改变 a 如枭不避因为万维网，我 
们根本不会有这次访问， 

Head First ： 说的也是！非常商兴在线问卷来上 

节目，再次感谢你的分享。我相信很快又会在某 
些读者投票或职业调査中看到你 0 

在线 问卷： 那是当然！我也很高兴今天能来这里 a 
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问卷调查的问题 


在问卷中问对问题 

你决定采用问卷调査，但 
有个问题：问什么问题， 

以及如何向问这些问题? 

在线问卷调査经常问错问 
题，不然就是造成接受问 
卷调进用户的答案的不可 
信。我们真的需要投入一 
些时好好地制作问卷 
问题.尽可能得到最佳的 
数据。让我们看一下良好 
问卷的构成 & 




任用户用\ B _ C , 
D © 菩， 送场罢 涑蝌 
-ft fit e 

优秀的问卷遜 §) 爯有特定的答策选持。 


仗秀的问卷埵 © 不会引导参与者选择 
^ 特定答察。 


3^优秀的问卷連目应简短 


优秀的问卷瓸 © 荽累锿茹徂 
d 易掻。 


如果用户©慈；？ . 則乇 嫖茲 
傷:禮线數搞 3 i ’ i 逢赶 G 的 

遺词用字\ #砝宕不会 fi 人 
© 惑。 


优#的闳卷瓸 © 询闳知轵或葱風， 
^ 但不会罔时要求得剡葙者。 


龙龍 i 驰 

有蠢问抱 


问 


:如果我想询问自由发挥的题目，该怎么办? 


^ . 不提供答案选项，并在题目中说明希空受访对象以自己的话回答 fr 自由 
发挥的题0非常适合取得定性数据 (qualitative data ) 0 定性数据是栺不追合化 
为可 f 化的数据，例如询问受访对象使用的操作系纟尤，所得答案的结果可量化 
(58% Windows XP , 5% Windows Vista , 30% Mac OS 、 7% Linux ), 忸如果询 
问受访对象在 H 站上遗遇的技术问题，结果则无法归类成敫值，询问自由发挥 
的问题时，请准备面对较繁重的结果整理工作，每个回答都会不一样，而且不 
会取得其他类型问题可得的统计（量化） 結策 0 


328 第9章 























□ □□□□□□□□□□ http://www.pin5i.com/ 

倾听用户的心声 


现在各位已经知道构成优秀（与不优秀）问卷的题目，现在轮到我们测试大家的技术。 
下面是一份需要好好调整的问卷调查。请研究其中的题目，并写下每个题目的不怡当 
之处。 


o 请问您选择使用哪一种浏览器？ 

■ » I » -H B- -I ifi I ft Hi h ■ I- -I I il -I m m 4 ，嚅■■囑 V ■- IP 4 » -fl 1- V ■•«■■■■，¥ ■ 零囑 學 VV 

A . Internet Explorer 6 

« ■ ■ v n _■ ■ ■ ■■ ■ A ■■ ■ !■ ri 1 ■ B 1 A ■■ ^ 4 # 4 ih ■ ih ■■ A *1 A I i! 4 41 4 ■■ 41 d c l it 4 丨 4 ■■■■ 

B . Internet Explorer 7 

Hri.l Ah A ■ * -I I; ■■ 艷 I- -I ■< H ■ Hi ■ « -I- V ■ V -I t< -I H- V ■ V T I P E V ■■ l~ V « 

C . Internet Explorer 8 

Q 请问您目前的 CMS 发布了与 W 3 C 相符的 

标记 A ? .. . .. 

B ■否 

■ ■ A m * m m * n * ■> A ifi ik * It * BiA -l-A-IB- I h -I ■■ -I I 4 琴 4 9 ■ 

C . 并非使用 CMS 发布 

0 有很多人认为设计时考虑 Web 标准是种浪费 

时间的行为——您也属于这些人吗？ . . . . . . . . ... 

t tlJ * i * B * 4 #«»■! ■■ 峄 V 1 V ■ * I V -P V # * <C 

A - 虹 

■ j 彘斕 + -h d> -fc + «»« 丨«眷 + 灞 S-^-S 譬 P ■ 手 ■■ 甲 ■- 警甲 - m m. m m m. m m. m m m m • __ 

B - 否 

Q 您是否认为网站目前的单栏布局不好，应该 

改为两栏式的布局？ . 

琴_ — ，琴_ ■ ■ ■ ■ _■_ r ■ ■*■■_ ■ n < a ■，醒 r ， ■■ t ar « 4 ; #■ n ^ mm 

A ■疋 

B - 否 


jBSg^ 

沒抵 
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设计优秀问卷 



9甅罅答 


o 


—起看看下列问卷题目，并研究改良这些题目的方式6 

请问您选择使用哪一种浏览器？ 


A . Internet Explorer 6 


B . Internet Explorer 7 

C , Internet Explorer 8 


砬 0 本夯沒问廷， 
^- y 烯金茯晷。 




!这个題目的问題是有偏见 & 有偏見的題目会鼓励受访对象以特定方式 © 答，题0中或 I 
!许包含特洙詞，或许因为措綷方式而引导受访对象采取特定回答本例中，所有选项都1 
1是 IntermM Explorer (虽然是不同版本) D 如果受访对象使用其他浏览器怎么办？如果加1 
!上 D 选项 " 其他”的话,他们的唯一选择就是 H 其他 " 6问卷结果将彻底搞砸（因为除1 
I 了 Internet Explorer , 无法得知其他浏31器），这个题3也可能误导受访对象，让他们选 I 
i 择系统中现成的 Iniernu Explorer 版本（而不是他们主要使用的浏览器）， ! 

w mm- w n wm mm hbpp «al< w wm w «« «pv mm mm bp mm -mm w mr mm mm J 


较佳询问方式可改为 


这个祕 3 不 

o 请问您选择使用哪一种浏览器？ 

A . Internet Explorer 



B . Firefox 

C . Safari 
Mozilla 

E . Opera 

F . 其他 





巧了不处迓 0 有怿忍，递场 
tJ 列出各#洌贫器（不再 

^ ^ JE ) , 
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请问您目前的 CMS 发布了与 W3C 相符的标记吗? 

A, 是 

B. 否 

C 并非使用 CMS 发布 


I 

茧然这个題0焦点明确又简短，却掉进一个常见的陷阱. H CMS ■和"与 W 3 C 相』 

I 

符这两个术谱只有 Web 技术 ffl 的一小部分人在使用，就算某姿用户听过术进.钽没听 * 

t 

过的人仍占大多数，这个題 U 筇着让参与研 究的对 象感凳困惑与诅丧的风险.请进免在 I 
趄0中使用术语，并尽 T 能在写作时以最广的受众蒗周为0标. _ 


较少行话=餃佳理蘚程度=准碥的谚答 


0 您的网站代码是否为合格的标准 XHTML 或 HTML? 



A ■是 


.否 


.不知道 



pm 


fs 最妨 


有蠢随 


1^ : 我该如何知道自己用了行话？又该如何从题目中拿掉行话？ 

行语是个很主观的问題。甲觉得是行话的词，而乙不觉得是行话 a 但有 
两件事可以确保题日清晰，第 一 ，再读一遍你的题9，并为受众着想一—试着 
用最简单的方式形溶问題，第二，找个不熟悉问卷主题的人看看你的问卷题 
他们可以从你的问卷中识别出无法立即理解的题目， 
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设计优秀问卷 



—起看看下列问卷题目，并研究改良这些题目的方式。 


S 通酹苓 


© 有很多人认为设计时考虑 Web 标准是种浪费时间的行为 


也属于这些人吗 


您 




这个题目对询问的内容做了级设。这是种立场偏颇的问题，可能引导参与者同意问題的论点， 
或选择特定答案^ 




斟问出假设题 g 


© 考虑 Web 标准的设计是种浪费时间的行为。 

请问您同意或不同意这种看法？ 

A . 同意 
/ I 不同意 

c . 还没决定利用舍 导癌走兮: 


这样食就轧谋杳结果，斿輯 
查的巧伐度* 


■# 边样隹 
^ ■: 1^ ■ 

它的 * 定 
。菩您括 
0© 意簽 
M ， JSSJ 
个 aii 着 
^^这畜砉 I 
A 人同左 
一个否写 

爯 y 问钱 


是否 


X 
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o 您是否认为网站目前的单栏布局不好，应该改为两栏式的布 

局？ 


X A - 是 

否 


这个題 a 的问題在于它其实有两个題目，参与者不知道该回答哪一个，如果只 
同意其中一个，或者两个问题都不同意……此时该如何作答？参与者可能因此 
感到控折，干脆放弃问卷调查， 


R 问一个蘧 B 


o 请问您是否喜欢网站目前的单栏布局? 



A . 喜欢 


B . 不喜欢 


C 还没决定 



在拢供甚非延的，务必加 
上"还沒決定厂这类选场 • 
以泊盖逢沿4不终烈的参 


0 请问您是否觉得网站的布局应改为两栏布局? 

A * 是 


N 

代 弩4 -个赶 0中问 
摩的版本，钕婷 
诲问®个迓 0 P 

y 

这墊跬 o 铰容易3 
铒.也舍衫威较浊謫 


■不是 

w c . 还没决定 
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为 rpm music 设计问卷题目 



磨笔上陴 


妓术调查越戀： 


为了帮助 RPMMusic, 该设计一份用户调査问卷了。淸从设计5个技术问题开始 
(例如调査用户喜欢的浏览器、拥有的电脑类型等），然后设计5个统 i 卜性与使 
用习惯的题目（例如性别、年龄> 使用 RPM Music 网站的时间等 ） e 请确保你设 
i 十的题目具有可选择的答桊、牮握 H 点且简短易懂，还有，不耍诱导答题方向。 




珀问铵&河连掂网络 
A, 搜咢 
6, DSL 

C , 光科 
0, TJ 或㈣ 
E . 不知迮 



犬拿参 4 。 


给 


0 




■ * I * ■ * ■ A I * I is >i I -li 1 




■ * ■ * ■ 




W 






■■ T ■ T ■ V I 



■I V 


* 
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统计性鸟使用习愤蘧 B 


❶ 


请问您 S 沏花 /b 个*】_时上？0 
A, (T5-) ■讨 

0„ 6' 叫时 
CM f - f50 •时 
0, f6~20_) •的 
E. 20个0•的鉍上 


❺ 


■*■*■*■ 


#*■*■*■*!*■ 


0 


IVIVIVIV-I* 


，琴 ■ 琴 •■_ 


0 



B 


m 


■ 
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rpm music 问卷调査题目 



可能的妓术 題目: 



磨笔上阵 
蘇答 


一起#看可能询间 RPM 用户的技术题目、统计性与使用习 
惯题 L 


❻ .* 

；讀问您最常用的洌猪器? 

M 

■ 

i A. Jntelnet 

■ 

: B, ^heiox 
\ C, Sai^i 
: D • Opeta 
\ E. 萁他 

p 

» 


到铑器的 CSS 鸱排方 A 另 


§J%o 


w 

i 靖问恁的电尨操作系统? 

4 

-§i 

: A. Windoyos XP 

囑 

■i 

■ 

: 8, M^indo^s \fista 

\ C, Mac OS X 

4 

: D * Linux 
■■ 

i E , U 他 


a 


i 


m 



娜户不 ㈣ 嚣 

作系賴出來 • _ 所有 接作 ㈣ 
郝矣装？狄认的到锩 B ° 



■ !i'lff lVHI'-l»«SVI*l 


■ 



叇问恁的电肱孱捂的分辨毕? 

A. 800x600 

B . (024 x 768 

C. f280xf 024 ( 或以 上） 

D . 不知递 




如同我 们在第 的发现 * 濞芩兮铒 J 
片子用户看到的两站金有重大穷响 ，所 
M 这一砝含带来猓重龙的作 & 。 
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玎能的统计性鸟儀用习惯涵目 


❺ 


请问笾的性則 
A •男 

B . 女 



愚论基付么全赶的问舂伐 

別_所有馎杳郝全调杳的碣 
0之 一 c 

体搞网站内宕的老异 * 伐 
則存设 釾決束的的分畏可重 

苟轻 3 


❺ 


硪问恁是否4网络 f 购买音乐（包 
尨下载啟权咅乐或购买贫体包皆 一 ^〜 j 
的）？ 

A . 差 
8.否 
C , 不知逸 


你的网竑用卢昱圣含在线 

这似 寻袅个很的 s 的紐 

t 任如采糾純务索，就 
网 出来 0 fi ! 


nr :， 工 

jt 他两站。 


0 


读问您 苫用丄 •闲几个.)•的? 

A . 0~5 
8-6 〜 f 0 

C . ff 一 f 5 

D . (6 — 20 

E . 2 f ~25 

F . 260 •时以 i 




用卢花在网 络土的 的问，说 
明估们 i ; 两的经給 I 否丰 
翥一这点含 彩响僅 用网坫 
的方式。 
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完成问卷题目 


最終定案的 RFM Music 兩户调查題目 

以下楚完整的问卷调齑题目，已准洛■上传到网站（或利用问 
卷调査服务）。 


1. 请问您最常用的浏览器？ 

A , Internet Explorer 

B . Firefox 
C * Safari 

D . 其他 

2. 请问您的电脑操作系统？ 

A - Windows XP 
B * Windows Vista 
a Mac OS X 

D . 其他 




运螫问 IS 有助吁 j 解 
RPM Music 网站訪闵考使 
用的技术类型 n 



3. 请问您的电脑屏幕分辨率？ 

A . 800 x 600 

B . 1 024 x 768 

C . 1280 x 1024 (或以上) 

D . 不知遒 

4. 请问您如何连接网络？ 

A , 拨号 

B , DSL 

C , Cable 

a T 1 或更离速的连接 


5. 请问您的性别? 
A . 男 
B ■女 
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6-请问您的年龄？ 

A . 18〜24 

B , 25〜34 
C - 35-44 
D . 45-54 
E * 55〜64 

F . 65 岁以上 


7. 请问您每周上网几个小时? 

A , 0〜5 

B , 6-10 
C - 11 -15 

D . 16-20 

E . 21-25 

R 26小时以上 


8. 请问您是否在网络上购买音乐（包括下载版权音乐或购买实体包装的）？ 

A . 是 

B . 否 

9. 欢迎提出您对 RPM Music 网站的其他意见； 

失望不满的地方。 



1^5)： 开放式题目的数置有限制吗? 


不算有，开放式题目是一种向用户取得特殊答案与反馈的好方式 D 不过，因为没有答案选项，故分析与 
解读答案所需时间较长，而且答案有时可能太过模糊或回答得不太好，还有，请记得这类答案的作答时间也 
比较长.而 JL 更需要用户的投入9 
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rpm music 问卷调査结果 


调查結果出炉 J f 

快看着我们的用户对于 RPM Music 在线问卷调 
査的反应。 


浏览器 


性别 


Internet Explorer 65% 

Fire fox 22% 

Safari 10% i£ 如拽期， Jhtetnet 

'Other 3 % Expb 如是僅用人數蕞 

8 多的洌兹器。 

操作系统 

Windows XP 75% 

Windows Vista 10% 

Mac OS X 13% 

Other 2% 


女 1 35% 



18 - 24 32% 

25 - 34 30% 

35 - 44； 22% 

45 - 54 12% 

§5 « 64 4% 



RPM Masie 布 62 %的用 
卢 •) •子 34 岁 , 和沾年轻 
的受众 。 


65 and up 0% 


屏幕分辨率 

800x600 10% 

1024x768 48% 

■ -a^T — i_ m , • I ■ II ■ » —i ™ 一 ■- ’ i 

1280x1024 + 38% 

Don.t know 4% 


R 绪线捿 


Dialup 12% 
DSL 





27% 


VI or higher 6% 


55% 


本蛀的结菜也 4 苒估叼姑鸟 5 
^辟轲整你的典 f 现象0 


每固上网的小財数 


0-5 

6-10 
11 - 1 R 


21 % 


35% 


16 - 20 18% 

25 10% 

26 and over 4% 





卷来 RPM tAusic ^ 受众 5&用花 
/ 在闲络 丄* 的的问也不•少。表 
矛比起 S 阄 i 同的數较少的 
族锌，玷们校;65解闷玷的 


星®在线购衮眘乐 

否 32% 
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对孖殽式题 © 的珍按 



我軎爱新版网站，它反映了这家店的氛围。但如果能让我钧买数宇音轨就更好了 

- ， ■ r . 1 - ■ ■ ■ , % • ■ - ■ ■ ■ ■ . ■ 

你知道，像 iTunes 那样，而不是买下一张裰要寄到我家的 CD 。 



我其实不太常用这个网站 a 我比较甚欢亲自到店里面。我真的喜欢和店里的工作人员 

' ■ r t r — !■ *' ' : b ■ - j 磚 ：' * - ^ » • • . . ， . r * JH 1 /" %■%- i . 

聊天，也軎欢与其他顾客交流。我想这个网站还可以 吧…… 看起来还不错只是我 

1 、 •' - j*« - " * | • ' a - ， • * •. * \ 1 «> « Ji gi _ I » v r.r ^ i m * u J 

不太常用 P 


'' 新网站看起来全乱了。一部分网页似乎不在正确的位置，很多东西根本找不出它们的 
意义 b 你们可以修正这个问题吗？我想继续从你们那买东西，但这个乱七八糟的网站 


让我很难做事 


o 


1! 


\\ 


当我使用 Explorer 浏览这个网站时，它很奇怪。界面似乎全都错位 
不该在它们目前的位置。 


有些东西大槪 




纽动脑 


有了问卷调査的结果，请开始思考这些信息间的关系。请找出其中的糢式与关联，为 
RPM Music 的用户在网站上遇到的问题拔开一丝迷雾， 
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rpm music 的问题 




Frank： 不见^我们通过浏览器观冇万维网，侃浏览器并非全都打 
造得一換一样。 

V 

Jim: 噢，某个“品牌”的浏览器更好些是吗?因此有很多 RPM Music 
的用户是 Internet Explorer 的用户吗？ 

Frank： 不完全是这样。我的意思是，有些浏览器的癖好（某些时候 
甚至可波称为 bug) 造成网页在不同的浏览器上#起来有点不 一样. 

Jim： 我懂了。既然希望使用任何浏览器的用户都有相同的体验，我 
们在设I卜网站时，就需要把毎种浏览器的癖好纳人考虑 • 

Frank； 没错。所以要抬出 Web Standards (万维网标准）。 

Jim； 怎么说？ 

Frankt Web Standards 造跨浏览器兼容性 (cross-browser compatibility) 

这个大构想的一部分。因为 W3C 与浏览器幵发厂商（还有其他人与 
公 H]) 〖办作， Web Standards (大部分）已经附在浏览器里。当你的 
设计遵循 WebStanckrdU 时，即可相当自信网站在不同浏览器里恭起 
来会一样。但有些浏览器的癖好…… 

Jim: Bug^ 


Frank ： 好吧， bug —— 这些浏览器在呈现根据标准撰写的 XHTML 与 
CSS 时.方式有点不同。 

Jim : 我馏所以我们该根据哪一个浏览器设计网站？ 

Frank； 首先， XHTML 与 CSS 应该与标准相符。这样会立即解决I午 
多问题。你应该相当熟悉你的用户，他们使用哪一种浏览器？ 

Jim： 现在知逍了，他 frl 多半使用出与 FirefoXp 

Frank ： 足的^所以特别针对这两种浏览器进行设计。敁后，有挂浓 
千代码的变通方案——你可能听过了，它们也被称为 XSShacks " , 
W 助于避开跨平台兼容忡的问题（比如 RPM Music 的用户遇到的 H 
题）。所以我们需要研究一些数据…… 
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Web 浏览器使用狄浞 

(整体互 联网） 


Jntetnet Exptp^ez 

资器的一丰^ 


( JE 的圣大争仪 4 吁忿有茗 些非常 

，輪现 _ 


闽 


如果不容易找出网站访问者的浏览器，该 
怎么办？ 


T 没想 f 砸 

/V 有鏖酿 

问 


如果我的电脑上没有某种浏览器，该如何 
确保设计不出错？ 


答 


荅 


如果无法为你的 R 站取得可靠的浏览器 数据， 好问題。不是每个人都安装了每种操作系统 
可以使用一般统计数据， 上的每种測览器來測试设计效果，最好在你的系统所 




哪里可以取得一般统计数据? 


| 渠道很多，最可信的途径应该是 W 3 C 汇编的 
数掘 (www + w3schoolsxom/browsers/browsers_stais, 
asp) . 但请理解，万絍网的相关数据并非完全准确, 
而且也不 Ji 得能反映俅的用户的状况 ， 不过在缺乏 
其他敫据的时候、这就是你的数据 来源; T 。 


有能用的浏览器上检测网站。例如使用 Windows X P ， 
則在 Internet Explorer 与 Firefox ( 免费下载版）上 
检測 R 站， 这会是不错的开始, 约 可完成 90% &还 
想利用其他利览器做检測时，可利用 Browsers hois 
(http :〃 browsershots.org) 或同类服务，它们用每一种 
浏览器与操作系统的组合为 H 站拍下屏幕截®，我 
们則可下栽结果， 


V?s3d0 ^ 


家艺 «« 0 


ua 


Hells 争 I 


VI 0 



奴一 5 J3J0ldx3ia£ 萁 s 

^ ss ^1- 0 
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internet explorer bug 

通过移动 hover 厲性来修 i £ 
RPM Music 的 CSS 缺陷 


fE 6 不太会 处理： hover 伪属性（事实上根本不会处理）。 
我们耑耍把 Relive " 类移到链接标签内，不再放在列表 
项中,并更新 CSS 文件來应用背設至正确的元素 。 


IE 6 H 支持键摟和锚标签里的 ： hover 




Home 


必鼠杉移迮导魷珀时，应茂戧看到舒 
杀出现。任®#芘6只杏绍掂 f 主斿— 

属伐， 芾未普 丑呈所苟无景丄' 
我们的#軚议丹在这个到览苕上的运 
0就不太合 ( i n 


I) 


H«w4tRMIUitfllc 


FrHnllHSI^p 


M 111# P*nv Hfcf^r fUtiwi 

Hlrtfei M L^#1 f+^ *-^ri ^ 

S IN ilMH *4* T 々 j 1$ i ■蟑 MiH 以 «Pum 

i 1 *** 1 ? —，#■» fc 1 l-nc^f 相 'h_ 

ilip 


，■* Ifri 

wfpf , 朽 mr 『 Hvi4 




Ifcvl s- J| t*|ilA| If ill t_ • 

Ac^g. L» H IJll tfAtv.Bi'S>llV ff * 
l^ fwi rt* i« iti^r _ 州丨 

liflH^'Nl'vi l iM .SpM |hU m Ip 

MftpF ^ |H* 
ftn pf^nw# | 


二 ，，，: 




HrA'*lt-Mh • hngt $iri 

L >^— 琴 r «*< rm F 

nn-li lw m !■_■-%?_ -^ti4 

I •Mt^n ^ ■,■*■« _4 j 


_4_l^ 
rjrtT I 
IT«I PiiT^W 


NlVW^# 

yp-fM^ ipfl# 

H j+> CfU kijmi-^r I 1 # 
rj ■MW il krMh_ 


Ulii B — ^1 nl4 W * mrt1**lj-i v|j>#C*» 1* n ^ 

_ «Jf auffwift 1 L<Hm|if p^fhipp 
inj f ih#-<|ii Ml *«,#■■■ 味 

^nf4 44^ H ISf iJ 栌 

Wii *a« HMM 

DlII* H#- iri _p H [r T>i •Idiii afl^0 

^j-a. fa ii^ w eaj 'h ght ff jf 


'L+- rvHAKKAaaferijHaBfcJuadtaMHdHbaiuaHUfiU 

mmrn ~ \ ii 1 ' ia hi 1 ! 11 ■ 5^ 
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把 RPM Music 网站 XHTML 标记里的 “ active ” 类从 < li > 标签移动到 < a > 标 
签内，并根据前述修改来更新 CSS 文件。 



打开 index.htm〗 文件并把导航区 
域里的 active ^类移入链接标 
签内。 


<li class"' l active n xa title= r# RPM Music home” 
href" t, # N >Home</a></Xi> 

<li><a title="Music Store” href= ,t n 1l >Music</a></li> 
<1 ixa titleRPM Blog" href= ,l # 1l >Blog</a></Ii> 
<lixa RPM Music* 1 bref- ,, # n >Et:c</a></li> 

<li><a title= f, Shopping Cart" href= r '#">Cart</a></li> 



打开 rpukcss 并修改具有: hover 伪 

属性的元素，使其为正确元素。 §nav ul 1 inactive, #nav ul li:hover { 

background: #333; 



于浏览器中加载网站并确认一切 

看起来都像该有的样子，如果 
用 Internet Explorer 6 r 应该能看 

到正确显示的鼠标移过 （hover) 
的效果了， 


jE 甚大的一个问 li 就甚 S 令咎 
和名的锃序砝筠彩嘀了 ess 的 
I 规方式。 

、_ > 



ti PMy Mh WrM4 

M a**l *Tfc*- 1-rt LHh 

11H >wit« #4i iPv P ftf 琴 # f Pub m^jpv 

id* ㈣ 噚 ■ MHJ»4 


-• 1 1 k 1 ■ 

■ 

1 

M ： | _ • 

■ 

r 

U( - 1. « " * , 1 , • ■ 

•. -li'. ； V ■ .、* 、 

p r* 1 . 1 r • i « 

' * \ ■ 〆 ■ 

1 1 u » — J - J 合 1 . 二 - ’’ 

■ j*ft， 售 






|Muslc Store 1 




d Wffil ■ 04 ( 1 ^ 煽 

P hHiww I m as ■ —■ ■■ _ lJia^ i 

MV_ hi rtf«Af« - ^P# t-wvMn 料 I _ tn ㈣ 

M#la _mF ri iImhi m v-y 

¥ll»P P#， J ■gewf < 


wHl M 

pli tr jvttu P 


■*#, l^fe I 

hi raiF^ii pf«F* 




IHft 


nd 1 ! 

i-M 


rrrsns- 




■ LJB 
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斩除 ie 缺陷 



关于 RPM Music 的: hover 问题的快速修正。 


蘚答 


XHTML 



acthe 蛊兹存 M 戏杉冬 
运祥不 仅语义冱磘，也不金 
破; JE 6 的闷短 m 




<li_ 


<a class=’_act±VB_ T title="RPM Music home 11 href= ,# # 11 >Home</a></li> 


<lixa title;._Music Store'* href- ,, # ,r >Music</a></li> 
<li><a title= f *RPM Blog” href- l1 # ,i >Blog</ax/li> 
<li><a title= f, More RPM Music 1 ' href= t '# 1l >Etc</a></li> 
<li><a title- lf Shopping Cart 11 href= M # ri >Cart</a></li> 



CSS 


o 


i v j u>li—l*iihg¥Ojp 



#nav ul a . active , #nav ul a:hover 

' "m. ' mm '' ■* J ■ _ 

ackground: #333; 




此鸟徒态兵孳相同 

ttm： 州咖- 



把 < ti > 无 砉勞滅 

^ o > 无棄 w 对 
应 XHTML 所傲的 
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不 禽爰筹约宪威 作甚？ 

边锃中的 枝何的问 电郓 
sj 傲 0 ’ 


等 一 r , 用产抆不到 R 蛣信惠 

的尙逋嘬 . 你漆不会认为达 

令问®陡 ffl CSS 妗 it 吒？ 


用户测试：让你的用户说明他们使用网站的方式。 


如果你想知追受众实际使用你的网站的方式，你需要 
做些用户测试 （ userEesEing ) ^用户测试也称为可用 
性测试 (Usability Testing) t 通过实际请用户试用来 
评估网站。 

我们会奍到用户前往的分区、使用时间最长的网页、 
用户觉得困惑的地方、用户从 A 点移动到 B 点的方式 
等众多行为。用户测试可以识别已知问题、找出未知 
问题、准确标明习惯使用模式，这呰都为再设计提供 
r 信息。 

但我们不只是盯 荇用 户与网站互动.还要提供任务并 
tf 筧完成海项 ( T : 务的时间^阶记住评估的对象足网站， 
不是用户。这一点之所以重要，足因为你不恝给（袖 
时间帮助你的）参与者那种你在测试他们的感觉。 
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可用 性测试 


我认为应泫 更加注 意邡些庹正值 ffl 两蛣的人《我 
们 甭要® 关对 RPM MusieR 站柏行 玎用性 胡试" 
35 S 衮怕 



Frank ： 好主意1 我们 其实该在设计过程一开始就加人可用性测试， 
但市后测试网站也没什么不奸。可用性测试是找出设计问题的好// 
式，因为能看到用户实际如何利用网站。 

Jitn ： 真抱歉我要打扰你的白口梦，但测试听起來很花钱*…… 

Joe ： 我有个 专门承接用户测试的朋友,这个行业很大,而且她的 
公司不仅 f 又做网站的屯意——他们为各种产品做用户测试。 m 像这 
样的专业公司，收费动辄上万元，甚至耍价儿卜万元， 

Jim ： 知道我在担心什么了吧!为什么这么货? 

Joc ； 他们通常设有专门的可用性实验室， Sd 备了能够捕捉毎次按 
键与柿次鼠标移动的电脑、记录用户飪个指令的麦克风、保存整个 
测试的录影机，故至还荷视线追踪设备可记录用户在特定时间的 
眼神焦点《另外,他们还有一大群处理测试结果的专家，然后提 
供容易理解的报告与边议。 

Frank ： 这样超出预算太多了。 Joe , 你的朋友愿恋分莩一些商业机 
密吗？！ 

Joe : 实际上，她不需只因为没有崭新眩 H 的实验室井不表示 
自己不能做 可用性 测试。我们可用许多兼顾预算的技巧来检测真£ 
的用户会如何利用 RPM Music 网站， 

Frank :所以你的朋友还是分享了 一挫商业机密？ 

Joe ： 没有，可用性测试只锯要一份可靠的计划、 一台 电脑，几 
个执行测试的人，还打几位志愿的参与者、敁近甚至冇些 1 h 
常厉宙而且不昂贲的软件进人了测试市场——例如 Silverbaek, 
http://silverbackappxom P 这叫应用程序能协助执行一些非常殳杂 
的用户测试，而不用帝扯到昂 贲的实 验室。 
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鸟®户兵人含一 

你的任务是変成用户， 捋妆 行通常出现在 
标准玎用性谢试中的任务。谛逢楯 " F 列指 

示，捋子空 白处写 7你在过程 
中的印奂。 



I 第1号任务：使用 www . expedia . com , 找出从 Detroit ( MI ) 飞往 Houston (TX ) 的最低单人| 
!商务抢飞机票，可从任何机场出发，出发日期为11月1日早上，曰铉日期是11月4日傍晓。 ! 





利忘？写出 
机索价格。 


在真正的可用性測试中，你不会写下想法或所获信息，而 
是“讲出思考过权"，另由专人记录， 
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建立良好的可用 性测试 



鸟用户天人含一繇答 


你的任务虽変成用户， 稃放 行通常出现在 
标准玎用性谢试中的任妾％铕遵循7列指 

示并子 空白处笃7你在过程中 
的郃象。 


或许馋的结果稍节不 


ipH. amA n pM h# ^ m . mm hm .hm mh mm hm hh i^n mA ， 

第 1 号任务： 使用 www . cxpedia . com ,找出从 Detroit ( MI ) 飞往 Houston ( TX ) 的最低单人 
商务舱飞机票，可从任何机场出发，出发日期为 II 月1日早上，回枴日期是11月4日傍晚， 



连择軚班的0期岛吋问很商# & 鸟飞，选场在找放在下拍式某荦 


的頂读 《 如菜不和 (£ 錄切的琦落机场， Expedia 含龙求洼择 - "个机网夷砟常 
拥枓，接纽 不太 好我。从绍诂舱转謫到冻务輪佟阇輩，住茗页 f 应找 

■ ■¥■■»■■■»■■■■■■■■■■■■ 1 ■- ■.h.h.VK fa. hi>hB!Bd4 疆 •- ■ 彘睡， 4 目 «11«»41* 函！ *_4 画 

对出这个这砝 & 


我们从这个莉玷体玲射口灸 
荈方®的经鲶， 洼释軚 班很葡 
辈 . fs b £ 变选场布点麻谈 * 


…… . ……… ' ……… …，- 

有时该，界 ® 的侈妨， 
fs 屋鉍少茗 # 戽 ® 或感 f 很 
紙 


350 第9章 















□ □□□□□□□□□□ http://www.pin5i.com/ 

倾听用户的心声 


省钱的玎阁性蒯试要素 

在预算内执行一个合适的可用性测试究竞需要哪些要素？以下是 
基本要索： 


计划：必须有计划。你的目标是什么（你想通过可用性测试完成的 
亊情）？如何完成你的_标？被测试的任务是什么？召幕哪些人参 
与测试？如果没有一份周详的计划，你的可用性测试将从头混乱到 
尾。 

主持 脚本： 主持脚本基本上就是整场可用性测试的脚本。测试如何 
进行、有哪些任务以及该吿知参与者的事项等 * 

主持人：生持人执行可用性测 liL 他们对用户说明锯要做的車，并 
細耍财澄洁用户的疑惑。 

y jr*v \ 

记录者 ： 记录者•负责记录用户做的事愦、说的话等。他们基本上负 

能输分析的数据。 


电脑: 你需要一台冇网络连接以及测试所需软件（浏览器、外挂软 
件等）的电肪 U 



地点：你需耍一个执行测试的空间。如渠没有专用实验室，也可以 
用你的办公室、安静的咖啡店，驻至是图书馆的某个角落。 


参与者 ： 你需恶 实际参与测试的人。越多人越好。这些参与者应该 
来自你的受众。参与者若根本不会使用你的网站，则对你没有帮助< 
你也需要补偿参与者，感谢他们花时间参与测试。或许可以支付现 
金 <一场接近3小时的测试，通常支付50元美元）或是某个地方的 
礼券（大家都喜欢 Amazon ) Q 
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主持脚本 


用主持脚本趣织测试 

如果想从用户测试取得最佳结果，则需确定测试有良好的组织且 
顺利执行。也就是说，了解毎件事的顺序、该对参与者说什么话 
以及想请参与者执行的任务 一 一这就是主持脚本的内容 & 


tr 蝣繫 


计划表 

30分钟一介绍与研究开始前的题 3 

可用性测试与任务分配 




S 的 少 


在 g 用性谢试的.你蛋的誊 
鸟; 4讲达类似7 ® 的内容。 



紐究槪要 

感谢各位参与我们的研究。我们对于各位关于在线订购机票的反馈意见很有兴趣，也将试着了 
解大家在一般情况下如何与各个机票订购网站互动。 

在本次会议中，我们先讨论各位为什么在日常生活中使用网络以及如何使用，然后特别讨论可 
能使用机票订购网站的方式。接下来，我将要求各位在两家机票订购网站上完成一项情境任务一 
—我 们会指定目标城市，各位则负资査找班机票价。 

茌各位完成指定惝境的过程中，请大声说出你正在做的事，让我们知道。我也要请各位指出任 
何出乎预料或让你感到惊讶的事。完成情境后，我将询问一些关干网站的问题，以及各位与网 
站互动的方式。然后，在各位填完一份简短的问 卷后， 我还会再问一些问题。 

淸记住，这赴关干网站是否容易使用的评估，而不是关于各位的表现。请问大京到目前为止有 
任何问题吗? 
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背景钫谈 

#说访谈提供了参与者的平常网络使用习惯以及他们使用与受测网站类型相同的网站的经验所 
以题目将包栝； 

• 请问您通常在什么时段使用网络？ 

• 济问您在使用网络时会做哪些与工作或学校相关的 活动？ 

• 请问您浏览 M 站时的主要肖的？ 

• 淸问您在何种情境下义可能会使用受测网站的同类网站？ 


这谨参鸟考的 ilL 


任务指示 

以下是请用户执行的任务 • 我们则观察他们完成任务的方式并记录所有 行为。 这些任务就是可用 
性测试中的“测试”部分 g 



磨笔上阵 


诏为 RPM Music 网站想出一些典型用户可能会经历的任务《 


o 


❺ 


瀣 B ▲ ■ •■罎 


o 


i ■ ri A H' ■ i 


■ V H T ■ 


■ ，■»■■■«» •■国 
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主持脚本任务 



磨笔上阵— 
蘚答 


以下是一些可能的任务（一般音乐网站用户可能做的來），或 
可用干 RPM Music 网站的可用性测试。 


我达的联络 fg 总与交速倍£ 



政善淛 试结菜 。 


这#问蛭涵差了参鸟老4测该期问 
的体辁 W 及他 03 j 螢測网站所拢 
的耷见。 



研究结柬后的越目 

研究结束后的题目设计用来取得参与者对受测网站的整体印象。题自可能包括 ; 


网站内容造否符合你的期望? 



完全不符合 


不太符合 


没意见 


• 整体而言.网站画而的组织是否容易理解？尤其是菜单层次与 101 面流程部分? 


非常困难 
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r 


主持脚本的莱构 

现在知道了主持脚本的毎个元素，睛把这些元索组合成一份文件。填入任何缺少的部 
分，然后就可以上场了。 



o 



卷起采似4不重龙，住敍(0差 
相关子主#辟本的一切 


设计一份简单的计划表与研究概要，包括你要对测试参与者说的话, 




0 设计一份简单的背景访谈，进一步了解你的参与者。 

\ 年龄_技术戧力等。这#将成 
^巧你 的统針 數搞，可以规疼用 
卢的兹 ik 

O 想出一些或许有助干解决网站问题的任务。 


Q 脚本则以研究后要问的题目结尾，以总结用户测试并收集参与者的 

一 些最终想法。 


0 收集并准铬任何测试可能需要的表格 u 



q * 於丈智公司或跨©企处敵测後时烤甭龙这类表格。 
&我们射 pUfMA 琿仗 卿 •不 f 龙控 

心 ti 个问茲。 
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rpm music 的主持脚本 


庄持脚本的深 拎擗杳 

让我们春卷 RPM Music 的可用性测试可能使用的主持脚本。 












30分钟， 


磘侈一纫部依分到进行.不浪费 
参鸟册灰的的问。 


存掂下来的用户谢试中.各佬将利用网站宪咸一系列谢试，这费测试用吁桫 
助我们详诂网站的效率鸟刁用伐。仔务结束后，戟枓麻烦各佬鹐写一份商短的问卷，沒 
舂内容鸟闲玷和各沄淺用在线商店的经验有关。各话在淛试过枝中硪“大声说出你的在 
ii " . 以值生 荈人记录饬的 任务的反应。蚤后.主持人奋仔务孖始后卯*洁彷助备倍. 
咸鸟备侘交谈。请问到 0 f 4 db 苟付么问跬噶？ 

使角这纷辟本’你彳 不金忘 

f 料谈 苦诉参鸟着的 


猗圣这谟接供？用户手常的网络僅用习償以总他们使用鸟受倒网站类智相同的网玷的经 
磁。 所以通0将包括; 


请问 您在谜 用网绺吋会傲娜些鸟 m 或学校相吴的读刼 
璜问笾到猪网站的的主龙0 的？ 
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• 找出 C & 巧。的栉连考弑斿吁 RPMMWc 网玷0购 （ t 接供分费测试信 J 6) 


整体兩言,网玷 a 蒞的纽织甚否容易理解？尤苒4菜辈层汝与画 面浚沒 的部分 


0常困雄 


«當容易 


• 找出 RPMIV ^ ic 的联络信总島交递沄 g 。 
* 我出本月摊荐艺人 


硏究铉束后的独0 
• 网站内 窖圣盈 符含你的期望？ 
完全不符合 不太符合 


® 咸三场 fl 务魷移了，你的观灰 
3餑 S 有典蝕事龙铤。 

沒耷£ 有点符合 轩常符合 




很好，我拿 S ,】一 份主秸瞄本？ < 
fs 我该 掌它怎 么做？不 是纛要 
與人来绐我达谈蚂？ 
















找亲朋好友做测试 


•V 



还记得稍早在 Expedia 网站执行的搜索任务吗？现在，换我们找亲朋好友来执行任务, 
尝尝身为主持人的滋味。谞记住要让参与者大声说出想法，并于下列空白处记录你的 
观察结果。 


r — ™ — ~ — — — — w — — — " — — 

I 第1号任务：使用 www - expedia - com ， 找出从 Detroit ( MI ) 飞住 Houston ( TX ) 的最低单人 t 
I 商务舱飞机票.可从任何机场出发，出发日期为11月1日早上，回租 EJ 期是11月4日傍晚， 1 
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亲朋好食玎能是个问题 


在预沿:有限的怙况下撖可用性测试，多半会以为 m 亲朋好友帮忙 
测成 比较容易。或 i 午还认为可以说服他们无偿协助测试（因为是 
亲友 嘛）。 但请亲友协助可用性测试的问题在于会把偏见带人研 
究屮。 

因为他们和你很熟，他们（有意识或无意识地）不太愿意提供不 
含偏见的反馈盘见，还柯，选择参与若时，你需要选择确实使用 
网站的人。身边的亲朋 好友通 常不适 N 站的目标受众，因此，选 
择他们也不会窣到耑要的调进结果。 


戎媒鸪牮沄迗常 T 太檢 
由。姑的 t ) &的減子太 



/ V 有蠢随 




:用户测试需要多少参与者? 


能找到越多参与者，研究紡果越好（且越有代表 性）。 如果只有一 
或两位参与者、那么你其实是在測试他们使用网砧的能 力一一 測试结果也 


无法代表大多数人的意见，而只是他们的个人意见 


5- 


问 


；我是认真的，到底需要多少参与者? 


t :这个问题没有益好的答案。越多越好，一般而言，你最少应该找 
8到10人参与。 

:如果我没办法找到这么多参与者怎么办？我应该全盘省略用户 
测 试吗？ 

答 I 别省略，即使只有：个人（甚至只有丨 个人〉 能参与可用性測试， 
也会带来帮助。 
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用户的反馈意见 


可用性蒯试鍺果——兩户的心声 
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一令简簞闽题 . 

看来我们的用户对干导肮菜单有点凼惑。他们很难找到联络信 
息，因为联络信总埋在一个让人非常困惑的导航组件里。修改 
这一点应该很容易…… 








用户说饵菹搏 。 &竹么意 
s ? 它 可能代 袠任何糸®. ©布让 
用卢大惑不铒。你们 S 么会想射 ■ 
这个铯掂苒实逢命联铬信总？效们 
萁余导舦无#鉍呼钱仕用户找到 索 i 圩汝 M 茲的全字。 

f 5 的在® a v 


、 

V \ 


«f»o 

\ _ m%ic ] 



RPM Music 


N^w at RPM Music 


From the BIoq 


Ntw4 - RPi/ i uptn«awaa^ and 
stoci<.f>9 up wi \o^ot ntcoras W ei* poSt-Th^i^ 1,1 r>g 
rutfi. 物 3,^1 d&V Flufi rtiin Jlv^tdrv ^ w« 
lu^act 咖 vrtli hM«vr«oool fvewAomsu 
j^rv3uncewrir> tn*fn*Wi. Cn«c< D4£kso^i f 饮 tn* 

nokaa-/ RPl^ n-4dn«. 


Ha wan with a B0H90 Bttai 

Ltft5> Hotnrarvu donejt wr.tn nu Ka^i sn-NiU^'iifr f us*n ibj^r iu t 
tciMyAjaiAmarfdi-of ir**ajynr. 7 . Pr&^ua tvs r*ci-a iiif m:c 
ywr f * vonl * T«p E»i d * n > C3 !_ m * T Thrl/(»T ^ 

, Vj^knt _/<Jt ， a*ea: ， rus*c fo# rve Mfu4e fiTi ly 


Oct 2D - Wejjst rr^ii 奶 oui p^J0e>n nx 

^ihoui« ?ua £f C^-isrmis tns jwa 

Jtpm, are cuffentjy rrhres^sMjng Vw, 

JTtO i p fr^ytMT^ CH 4 C 3 CI Out, HMtMn UP 
i-N 1 ：ft •flf pofSTM* 

essus 时 


玢助 PPM 


OctT - On «?iW 

fk^M, 0* C^bCk^Jl m« LP'i m* 0^«T tV«# 

3hJW5*^ 










舰 4 


，入 ^ ，七 ":. I'- ■ "t-^' .* *> . 4 - 1 . - ： W’C 


At the Party with Hector Rivera 

Hector Rivorl Xfie kng of York L£in Sdu realy 1 ±^1 尨 1 >vtjitva 

1 挪 L^P^ty CiirgrEi.^ HtFUS Tap 40. : nii aKS-i adjt *131 

tur^i^a afi nlQh* la-^g dr eta surt to- moot* awo^ it\« fecat^ 

fleer 加 


*hv*v*j a 
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调整 rpm music 导航系统 



-点简单的修改 


< ul > 


362 


<1 i><a class= f, active f1 title-^RPH Music home “ href- ,1 # t, >Home</a></li> 
<li><a title-'VMusic Store 11 href s ， r # 11 >Husic</a></li> 

<iixa title^^RPM Blog 11 href= ， r S ,, >Biog</a></li> 

<lixa title 在 "Moxe RFH Music u href-^i'^Abou^/ax/lix 

<1 ixa title= M Shopping Cart” href-' l # 1, >Cart</a></li> 

</ul> 

后的裱期内容。 
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ft o o 


APM Music 




9 


1 


議 


New at RPM Music 


炙不敢 相话达次的耔玟这么简单。 
问鹿釗是通过实施可用性谢试鸟戗 




V" 


1 




At the Party wrth Hector River 

Meet Of Ajyara. W Iqinp &f New Utfm Soul 

1966 ma At pany, Currdrig imo ina R&BTt 
r^ayDudarvong ail night iOf>Q artd iurfl i& e>ao^t^ 
in fout □DUectioo 


咁用户心声布找到。用户 s 有彩响 
力：？ f 


Ocx 20 ^ mjufli raocivtdt my^tenods padugfl m cuj 

wMHKXj«4fuLi of Chri&imu Mum 叻 u«mio 
in 4$pan. IV 。的 cimocitty itivWlga^( 
oilgint arKJir fivtiythino cfiocte out, was hav&f 

ofi thfl pgrcfvsH Could M 饵 

Vu&t exdusjvQ 


Oot? - N 和 sfteoJ^ 
nlQht B« 3urt(oci 
s^tppEng. 


Hawaii wrth a Bongo Beat 

Lcfey Hdm^a has bdoaii agatrt vnih this tdn-NASJivi I1 q fusion album 认 ka 

totakftvouDKktomeisJavda^-c/ ttwcoontjy P»c«upinnreoofdarKJ ii^en (o 
your fwvn^irwcal Omic? t 切甲 The htooo of F/^nAkDOra' and lira 岛 ways 
Qoiigtinul ， Vjh_kim Mtf*' (Vw ： ntj&i^f6rth#vwft0lAfArKy 
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NW4 - RPp/is poanrvgi no trv rtoJiasy waoh a 
sicKXlng up on lots of rDC^w for iho pose-THafikagd 
LP WfraPwuia wth invaitorv ond^e 

susd«c! Ihffi w*n r%av* som«oooi n»w A^Kiafi to 1 
ano&jnu ix^rtn tne rmntri a Cl^fick 於 om 饵功 

notid^ R?W maclwa. J 


At the Party with Hector Rfvora 

H«ctor Rivera, ifwfcnao? New YM Latu Sout resfr^ 巾 aK« a apiash wl!h his 
1 喊 nri«mAr 的 . 户吨 Cnmorng into tr># R4& Tcp 40X cJ«t[c win 

nM you &i rvifriT i*ng ^kiis surdib b^vn« (Sn^&f r^ras 

m TOurooiiKtion 




Oct 20 ~ a -rys:t^ua pica^t 

wSnefTO^&ra' of C^rtst^ Th« sewnlo 

a-tainr^ -n v ： edeu^ertTiy Ins-^eti0 
Ori^kn$«Mlif frwythinfl ClioCks out Wll 
on the slttfD^ ^jrchase. Coirtd t)« m^ma^n^scf in RPM 
rAj^c»toiui^v« 


Hawaii with a Bongo Boat 

l#R0y ^u<lor^ if wHh lfti$ HaMLah-KMvill9fi/VQn 糾 ^ 
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B 站统计数猫为阁户崖出（另一#)声眘 


网站统计数据是另一种找出用户行为的便利方式——可了解用户点击的网页（与 
点击率）、最喜爱的网贾、用户从何而来 （ refcrrer ) 以及闬户可能在网站里搜 
索的事物。 


欲取得网站统计数据，可以使用捕捉、测虽与汇报各种网站流置信息的应用 
程序（可安装在你的服务器或其他服务器上> ,这个过程通常称为网站解析 
(website analytics ) & 无论称其为网站数据统计还是网站解析，它都是获得关于 
受众如何使用你的网站的信总的好方式。让我们春看 RPM Music 的统计数据， 
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网站数据统计 

B 站辭析工異 


Mint 


器土 $装，只需, 

30无莫无 a 


&oogle Analytics 



Mint ( http :// haveaniint . com /) 是个很酷的应用程序，由传奇网站设计师/开发 

者 Shaun Inman 所创纽.它在你的 Web 服务器上并柿捉流傲数据-然后呈现 

在 Mim 特制的仪表板 （ dashboard ) 上 * Mint 的优点是它能通过称为“ Peppers n 的 
外挂进行扩展。这些 Peppers 外挂程序和小工具(可至 Pepper Mill 取用， http :// 
haveamim . com / peppermill /) 由网络上各式各样的有志之士开发，与安装在服务器上 
的 Mint 搭配得天衣无缝。 


Google Analytics ( http :// www . googlexom / analytics > 是 Google 提供的免费服务， 
可产生详细的网站访问者统计数据。虽然 Google Analytics 可以提供网页点击率、 
refbrrer . 浏览器版本等信息，但它收集的数据比较倾向市场部门的需求，而非设计 
人员或开发人员的需求。 



Google Analytics 基于称为 “page tagging ” 的系统运作，它 

把一小段 JavaScript 插人网站上的苺个网页里 P 每次加载网 

页时，这段 JavaScript 就开姶收集匿名来访者的数据并返 

IS ] M Google 管理的服务器进行处理，然后以便利的仪表 

板格式呈现(在 Googk Analytics 网站上 ） B 

Qooile knatytics 丑兔费的 T 
有跟不抟的敌 搞葆踅 

妖® & 
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你的 Web 设计工異箱 

第9章已经成为你的囊中物，可用性测 
试也加入了你的工具箱。解决了网站的 
可用性，下个课题是网站的进_步演变。 



复习要点 


问卷调查是对大规模人群收集与大范围 


主题相关的信息的好方式 




屬 


■ 


问卷题目应该无偏见且不复杂。 


可用性测试也可以花费很少 s 

可用性测试基于任务——要求参与者执 
行一些任务，我们则评估参与者完成任 


设计开放式题目用以提供定性数据，但 
这类题目或许很难处理，因为每个答案_ 
都不_样.而且你不会收到与处理其他_ 
题目时一样亲切和蔼的统计（数据）结胃 

果。 

有些浏览器的癖好使得网站外观与我们 B 
的设计稍有不同 6 

如果设计时遵循网站标准，就可避免大 
多数跨浏览器的兼容性问题。 

可用性测试用于评估真正的用户如何使 
用你的网站。 


务的方式。 

主持脚本是可用性测试的 蓝图。 

招募亲朋好友做可用性测试可能为研究 
引入偏见而影响研究结果的可信度。 

网站统计数据（网站 解析） 提供关于 
网站的使用习惯，例如页面点击率、 
referrer , 受欢迎的网页、浏览器等 & 
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我齡新博窖玎认故越 ft 3, 我 
£?离兴哦 f 我们的达问者 —定很 
激动…… 


各位建立了这么多精彩绝伦的网站。现在可以活动身体. 
伸个懒腰，等着看浏览人数增长了吧？等一下，别急着休息。 
万维网不会停止浪变一你的网站也需要跟上脚步。你可以加 
入新功能、调整旧设计，驻至全盘重新设计。 一 个时常求新求 
变的网站反映出与时供进的设计技巧——也就是说，你的网 
站是你的最佳宣传工具。 


会演变的设 i 十 

♦ 


进入新章节 369 









你的作品集 


到 © 前为止的作兵籮 . 







_ 


邮 rtc 扪 Jap 


到目前为止，各位已经完成了不少美观大方的 
网站^花点时间回顾一下这些作品，为自己得 
意一下。从第1隶开始到现在，各位已经体验 

了不少主题 a 一‘ 


( J\axk 的0本 C 洛网社 


AuJio - Z — 




ftudio ^ 


Sign Up 


F ^ r^s Boq ^ 










C/ Mnq 


tfsfBO 


A-. »■-f 4-iu- ji* 






’r ㈣ 


'^^^Srir^ru.-L^ 


_ j ■ i ■ 鹫 i^iio 






C 4 ii^ fa | ■ 
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斩鲜的内容 


保持 R 站鸟沟容新鲜吆 
保持用户的谚钫率 

如果你 是网站 设计师（无论是个人还是隶厲大型工作室），你的 
网站就足你城好的公关宣传。网站不只陈设以柱的项目成果，也 
突]丑了你的技术、帘美观与设计感觉。所以我们必须确保网站永远 
呈现敁好、蚰新颍的工作。 


这也 表示我们不能让网站长期使用相同内容（和特色）。一直不改 
变的网站带给用户的位患 是： “ 你#， 我一点改变都没苻，这家公 
司一定哪里出问题丫。”新鲜的内容会给用户送出正而的信息，并让 
他们经常回來光顾， 

再次汸问 Red Lawterw Pesign 

Red Lantern Design 做得还不错。与 Jane 合作，你们获得 
f 令人印象深刻的项 H 成來，你还协助 Red Lantern Design 逮 
立了创新、尖端的设计声禅。但想维护这份声昝，还耑要确 
保 RM Lantern Design 网站跟得上潮流 e 现枉正是回头改造的 


Red Lantern Pesign , 对你的闷 

站设讨 枝巧想必不爰闲超，我带？ 
个资浅的其术设计师來帮杧。 


好时机。 


Red lantern Pesigw 待办事项 

□ 更新网站的外观与感觉 

□ 增加网站的跨平台茈容性 

□ 取得见好的用户反馈意见 

~I 与用户史好地沟通 
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磨笔上砗 


Red Lantern 那位做_术设计的新人非常努力地想出了儿个更新网站 
的点子。你冇什么看法？ 


我们预留了评论优缺点的空间 
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磨笔上阵 


看了美术设计师对 Red Lantern Design 网站的想法，你冇什么愆见? 
冇可以用于 m 新设计的元素吗？ 
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f 我比较#欢笫 一份进 

i 十© s 它翼葙 3 R 站，侄没有 
太过勒 0 的变动^ KS 符含我们 
v 的龙求^ - 


V \ feb 设 计在子 而<革命 


Jane 说得没错 9 网站毎隔三到四个月就来场大翻修可能是有问题的，首先，如 
果你正在为客户工作，每年做三到四次网站设计整体翻新将消耗大量时间与资源 
——更加适合用千容户项目的资源。 

洱来，你的用户对干目前的网站感到舒适_在。他们习惯了网站的外观，剧烈变 
动会困扰他们。既然如此，该如何维持用户的兴趣并让他们更多地回访呢？邱以 
采用演变式设计法 (evolutionary design approach ) 來更新你的网站，逐渐改变设 
计美学与功能 u 这样-来，你的网站仍然能给用户熟悉的感觉，但又布新奇的一 
氮 


©侈 i 钛巧鈔祕 
吸？ U 主逄力，杉 
诸 A 下的 ©偉加 
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旧1: 1 © 同 ‘ HH {朽 


Red Lantern Design 
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使用 css 改变你的设计 


使阁 CSS 演变 Web 设计 

设计时遵守 Web Standards 的好处就是在想要改变网站设计时，你只需 
要编辑 CSS „ 你完全不需要担心标记（这就是遵守 Web Stmidards 的好 
处^*-内容与样式分离 ） a 





O —点点 HTML 文件的更新 m 头 
^ 区域、标记的调整）。 



琢版 index-html 


® 复制原版 CSS 文件并在 HTML 文 
件中逑立链接。这样一來，随时 
都可以恢复到原版的 CSS 。 






Red LintcmDt^ign 




Q 修改新的 CSS 并 ffi 新发布 

网站。 
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Jane 决定了 Red Lantern Design 网站的新设计后，该把网站的 CSS 与标记拿出来 


编辑了, 


O 打开当前的 Red Lantern Design 网站目录，复制主要 CSS 文件并 
重命名。这样即可修改网页样式，而不会影响原始设计。 





/redlawtern 



/stylesheets 





违綠玄 苕未時故琢 
诒版的 css 



screen.css 


► " F 克链淡 . 



目前位置 ► 377 



















更新 red lantern design 网站 



长篇习鹿 


❺ 


关于标记，我们只修改对样式表的链接，改为引闬新（复 制版） 样 
式表并从 HTML 中移除页头图像（稍后再用 CSS 放回去）。 


钯斜祥式表如入 XHTML 走辞中 3 © 
巧 S 认荏廠1制兩来 f 兹看起來一 

CDOCTYPE html PUBLIC "-//W3C"DTD XHTML 1.0 StriCtZ/EW* 1 梯一样， 伐金或 # 免竣变的楛柰。 

11 http://www>w3-org/TR/xhtmll/DTD/xhtmll^strict .dtd"> 

<html xmlns- , 'http://wwv/.w3,org/1999/xhtml rT lang-"en M > 

<head> 

<title>Eed Lantern Design</title> 

<meta http-equiv =,1 Content-Type M content-^text/html; charset=utf-*8 ,r /> 
dink .„ ^ yr ^ " rnvr 卜一 " 一 … T _〜 rr 「 r 「” ^ 




<Xink rel" f 1 s tylesheet 11 href =__/ css / screen 一 new * css " type ^ , f text / css 1 r 
mediae 19 s ere en ,r /> 

</head> w 闲否£_威荈行_ 

件中 a 隹甚係长的—行工导 c 


<body> 


(050 



<div id- 1l masthead ,1 > 

n 汁 tf H n ri I 1 nr r rn ~1 h 


<hlXxiQg alt=”Red Lantern logo ,r src =' 1 image s / rl_lo go_update d * png ff 

/ x / hl > 

<ol id= T _nav_’> 

<lixa class= M active ,T tit-Ie =1, Red Lantern home" href= rT index, 
html r, >Home</ax/li> ■ 

<li><a title= li Design services” href=3 ir serviGes B html ,, >Services</a></li> 
<lixa title- lr 0ur work 11 href =,, portfolio.html M >Portfolio</a></li> 
<lixa title- ,f Contact Red Lantern' 1 href- ir contact.html'^ContactK/ax/ 

li> 

</ul> 

</div> 

<div id^^wrap 1 ^ 

<div id^'^eader 1 ^ 

<img alt= n tokyo buildings’. src =,1 images/tokyoopg 11 /> 

mflll i r 曹 T -"" ff \f hill .mmm 

m _ ' F W ' 1 n■ '« ■ ■ ! * JTIFfT >. m _ " ! *■ . __ ^ _ fj" 5 - 1 11 , ■ 

<span class = , l anip ll >& aiiKp ;</ 8 pan > usar experiences for the web .^ c / hl > 


</ div > 


\ 移狳 <化5> 枋罟（页癸的背著® 傳卞 
彼放入 CSSi 4), 也钯芡奐磕冷采 

用 <# if > 杉罟。 


378 第10章 











□ □□□□□□□□□□ http://www.pin5i.com/ 


会演变的设计 



更新新的 CSS 文件以反映下列调整4所需代码在下一页 


5 

Oesifntt 字 f 本 


如入®货 4 稍鈦防髟沒采 f 
以5分 I 衮布易島货 I 。 


Red Lart^rn huilt^ ynjqtie 
inkjrfuces S usi：f 
extk?f(oiK>； b s W u\o wctt. 


入贡头 @ K 象 M 在 
的 < dt ^> i o 




I prr-] 

• _ 


.說 








Welcome to the New 
Red Lantern 


nw LJ^wni^i VTijil *cti Ol^gn r^rri 5PK14 i«rg 

tUfidAfdi-bAbKl w 6 t>do 意峋。厂 d Oi?^：..n isnsufJ c ^fr：^ 

DO^UtMul |f\ir WA^f jrfXif tT-^vn^T^ 

r^pcv 


i\hVf t Vij m v^tjT ys^-^i 


ifOjOt yam tOTVly .:, sn^rfC^kv] *f< >) w n u ^ 卜 M - Oui OiJ 

,y^T\ .Vw^ TiJ WrCft 的 3 : 'jS A.h d ， pfO ： i>^ 邮 3 作 

Vi'O l^wjrj |，5 06,1^.^ W. y^j ^3 1^*15 —jr pri H.^W r：r [K? W0t> i 
LprfT^pH'f .I>1 C^^f'T 'ft E lM 

^OUTSliO 


SI 


— 


fn 


n 


iiiiiiiiiiBai 

^ 分栏 il 整巧 2/3; f / 3 _ # 值用 
列表整 S 作品 ft . 




► 下页继续 
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调赘 red lantern design 的 css 




为 screen _ new , css 加入样式规则 T 使 Red Lantern Design 符 

合美术设计师制作的图稿（我们已经划掉旧规则，各位只锞 
填入新规则 ） ^ 


#mastliead { 

margin: 0 auto; 
margin-top: 20px; 
width: 800px; 
color: #fff; 



坊⑽—心 规則基戧们常龙茇入©话 
® 偉的祕方。 


k : ^ \ 

导軚列表 

也 f 诮整至合这的倥 

#wrap { 

clear; both; 

margin: 0 auto; 

padding; XOpx ； 

width: 780px; 

background: #fff; 

border: lOpx solid #5c0505; 


} 



} 

#nav { 

float ： right; 

ft n 

font-size: 


#header { 


1 

#header hi { 

font-size: 2em; 


这里基需銮加入页头 ©嚷 的祕方（秸罕3 
认彷花太 件 中移除资英®薄）。 

锌后， < m > g 重斜5排射纪含设耐#® 
福的佬 I 。 


4maL'gim iO^ii" Q Q fa 





iir iB . J 1 ! 
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#content { 



#sidebar ( 



分栏宽度 3 铨不同 J . 電龙拆开这 
场级則。 



^content ^ ^sideiat 制 
将分别硿則不同 <Av > 的 



background: #eee; 


3 sidebar h2 [ 


font-weight: bold; 

V' 1 T> -»_r 

—^ 八 

TTraTyTTn 




的</ 12 >加土祥式以紀合©樣中的 
宇体摒钕。 、 


异 port 


#port 

} 




Rod Untcrn Do^i^n 



li img { 


V 

作 s 诔的©恁 t #— 墊调 
整。 © 4 中的 as © 侈看柒 
釦仞？有付么; T -— 样？ 


sm^ 


Wekxxne to the New 
Red Lanti 


<MIWM 


tem 

t r^- 4—nT ■ e -pit. 


^■ji _ 开 ，■»■ ■ 赫 Y _ 


I HI j—, ,■ «■«!■; -wWm r i^w'l ~kjr , ■■ ‘ h* M^Cm 

I ■Pfli *-^aw ksp ■ mmti rri ■Ajf iiwi 




9 rfc »■ rw 聲 4 >i _ * w —W ，- ■■■iJ ki 4 卓 _ 喔 ， 匕 J u 

PL^iVV ^ 外 ， p 1 »» • ， f^j pi'hao W># 

A# nCC " 1 


A !，《 

I mm.wd >1 


I'V ■ a" ■■ a, *t#y yfAJP i»¥«iP 4 f 4 

•fc* 


tVwHk* ■ n，+ 
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red lantern design 的新 css 



以下是对 Red Lantern Design 的 CSS 文件所做的改变。请记住，不需要改 
变或移动的旧版网站规则可以保留。 


#masthead { 

margin ； 0 auto; 
margin-top: 2Opx; 
width; 800px; 
colors #fff; 


的在这 (Ci 基个 ® 
漣剌忾角的长衫©侈）。 




height: 70px ； 

background: url /image s/roxinded header.gif 1 ) no-repeat bottom; 


} 

#nav { 

float: right; 

margin: 0 lOpx 0 0; 
padding: 30px 0 0 0; 

font-size: Uem; 


如入惠度 ( height ) 鸟锊孑囝偉 _ 印可 
在背 f 加入 © S , 


} 

#wrap 


clear : both; 
margin: 0 auto; 
padding: 10px; 
width: 780pK ； 
background: #fff; 
border: lOpx solid 
border-top : hone; 


你想到这一场了噁? ©泠 # mast head 有势 
f -$ . 滅 fnfs 栘啥 


#5c0505 




theader { 



height: 18 Opx; 

, 

background: tirl { 1 • * /images/tokyo updated-jpg 1 ) no-repeat; 

„ , r j , ， ji* "■ I !■ . "'J *H- > " ! T- ' ■: 's - W .'r t p 广 mmam • t ' <■ • j* 


border: lOpx solid #eee; 

} 

fheader hi { 

font-size: 2em; 

1 ine-height: 1 • 2em; 
padding: 20pK ； 
color ： #eee; 
width: 200px ； 
font-weight ： normal; 



係丈件 B 不爯写芘在 HTMl ± 

件中，芍以存 CSS 丈件中 值用斬 ©傳作 
筠 <“>的背景。 

这#可链匈 < W ># 签的诘义 
兩 i 字忐钱卷起旅保爰®緣的’ 
一部分。 
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宠威后的总茶截 I 


^content { 

float: left; 
width: 500px; 
margin: 0 0 20px 0; 
padding : lOpx; 

} 

#sidebar { 

float: right; 
margin: 20px 0 20px 0; 

^ padding: lOpx; 
width: 240px; 

border*-top: 5px solid #ddd 

background: #eee; 

} 

#sidebar h2 { 

font-weight: bold; 

text-transform: uppercase; 
padding: 0 5px 5px 5px; 

} 

#port li { 

margin: lOpx 35px 0 35px; 

} 

Sport li img { 




^content ^ #sidetax 取句 S 的宠 
度，分到命网否的苒 W 洁劫。 tQ P x 
的这咱 时於各枵的内容加入—点呤 

级空闵。 





蚤后一场淺整差《合设舒 ©锘 角铤的制柜 
内宕的杏及作 甚錤的 整休外戏修珐。备个 








border: 5px solid #ddd; 
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unique & 

LL&?f for 


Red Lantern Oesig 



} 


目前位置 ► 
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加入网页效果 


384 



俄好， 撙式老的部分 B 轻完成我还布兵一个 
不琪袞的 M 方：我希蜇作品任的®分更與 S 动性。 
现在 P , 是点击©係，然后通尚别的 R 站 SB 。 不陡 
让达个过稃 更有刼 35且让闲户俘毡在我们飴闷站上 
码？我希 望笮些 让人捭砹的兹菜 f 




3* 


T 


Red Lantern buMs 
unique interfaces & 
user experiences for 
Ihe web. 


❹ fm 


R£d 


Lbnter/i Deilgn 


第 10 章 


Welcome to ttie New Red Lantern Design 




*■«. ■ . Lin 


--- 

7.k~ 

* 』 


■* < 

*1 


OUR WORK 


Rnad Lanlorn a a small web design : md consulting km spocUk^tnp rn 
etiandards-bo^cd woi) <^cstgn and tiova'opmonL Our gcal ^ to Hui'd umpto, 
beautiful M&pagcs that make your inforinattofl easy la firvJ and youi users 
hnppy. 


If you Dr your company rt intcrasUKl in working with us. pk^ 
pon?o!ia ordo^gn gnti ti^atng wa^k ua 

Wo tOOK fOrw^r^ TO hicnring Irom you 〆 
LttKi sJmplor arv? fiasioj 






































磨笔上辟 
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沾研究下列数种能让侧栏作品纸更典互动性的方法。淸把优 
缺点与方法名连起来， 



优点： 互动性与兼容性的芘好 
混合。 

缺点： 或许苻些浏览器会关掉 
这项功能而无法金而支持。 


jQuerv 


JQucry JavaScript 
library 


优点； 所冇源码都与标准相符， 
而_[1 能在大多数浏览器 上 运作。 

缺点： 互动性很低。 



XHTML ^ CSS 


优点： 无枸无束的互动性与 
动画表现。 

缺点： 除了视觉观看，没有 
其他取得内轾的形式， 


目前位置 ► 385 











该选哪种互动性之道? 




磨笔上阵 
薄芩 


看看各种效果选项有何尜现 t 




Flash 


代价差钯 新有 内容葙 a 

f - 的 SWF i 殚 f 。 


jQuerV 


JQuery JavaScript 
library 


d^Scupt 而 fl 務 

纪 XHTML 鸟 CSS 的 a ^S^V/n 
常萚犬。 


m 


r 



XHTMl * CSS 



虽然巧以只觅 CSS 敗出一皆打常精砂的兹菜 
fS ^乇 迖 现俱老扳 t 龙的盎战性。 


优点：互动性与兼容性的良 
好混合。 

缺点： 或阼 w 些浏览器关 
掉这项功能而无法全面支 
持。 


优点 ：所有源码都与标堆相 
符，而且能在大多数浏览器 
上运作。 

缺点： 互动性很低。 



着来 t JavaScript & 

为作品鎮加入亙动性的 
好迭綠 D 


缺点： 除了视觉观看，没布 
共他取得内容的形式。 


优点： 无拘无柬的互动性与 
动画 丧现。 
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不是一流的程序设计师，也能利用 JavaScript 添加网站互动 


JavaScript 是网站设计屮很常见的一部分。它被利用在各种地方，从 
辟祗特效（例如厢示图像的 lightbox ) 到 Ui 元素（例如 slider 或 
accordion menu ) ^ 问题是 ， JavaScript 对于只接触过 XHTMLg 
CSS 的人有点太刺激了. 


解决方法是利用 JavaScript 函数炫 U 函数庳是预先编写好的 
JavaScript 函数与控制项，可以放在我们的服务器目录里，并从标记 
中调用。而我们不需耍非常了解 JavaScript , 就可利用这些函数库。 
这些函数库通常轻巧、具跨平台兼容性，而且与标准相符。 


有各式各样的 JavaScript 函数库设好的选择包括 Dojo (hup:// 
www.dojotoolkitxom/) v Script.acuto.us (http://script.aculo, 
us/) 、 Moo tools (hitp://mootoo]s.net/) , Prototype (http:// 
prmotypcjs.org/) 、 JQyery (http://jquery.com /) 。 



入了轉 SavAScupt ^$2 

运本韦 oS_f 


看看 
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加入 lightbox 特效 


使用 JavaScript 制作 lightbox 特效 

为网站潘加至劫性 


lightbox 是一种特效，丧示取用图像或 html 网页并展示在琚幕 
中央浮动区域取。在某些函数库里，可以设计网站竹眾淡出以强 





Red lantern Design 


调浮动区域。我们会使用一个名为 Fmrebox 的函数库^它非常适 

合 Red Lantern Design 更新后的设计。 


或违链玲® G ， 构同 1 ® 体的较大 
版舍加栽至4華中 决…… 


，•…■狢 ® 仓笆苷景 , 丰迭 明这相 

(忐采用 K 合同站设0的圊免囝 
簿 ）■ 2有 坤 cW 獅 




类似 fdceiax 的逐盘总6间或增加 > 互. 
^伐，而铎仴兩 iU ： 的®係或® 玲 

沒的鈐方珐 & 


: ， 


f^oo 

r T i ' U 'F T M- ，: T i ■ .m- = -* ——=— 

Li _ 
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在 Red lantern Pesigw 主英里加入 Facebox 

0 m 至 Head Frist 网站下栽本京使川的 Facebox 范例代码： 
www, headfirstlabs.com/toooks/hfwd 

然活把 F 故文件放到合适的目录 



/redlawtem 



/stylesheets 



screen newness 



screen.css 





犯 tfy CSS S ^ SL 

入 / st ^ lesheet $ 0 录下 a 


face dox. css 



把 /iace$ox Q 录兹杏 
/i^es 0 录中。这祥 g 
S3 合 JflvflScupt 2 的 it 件链 
孩方式 


/images 




/facebox 




/javascripts 



倾 mi 
i htmii 立 4 鸟这茶个艾 

4 的链戏，一切玆太功告 


faceboxjs jquery.Js 


目前位罝 ► 


\ 
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设罝 facebox 


編辑 index 丈件 

4 

O 在 index.html 文件的标头里增加一个 CSS 文件链接。 

<!DOCTYPE htcnl PUBLIC "-//W3C//DTD XHTML 1-0 Strict//EN 1f 


Rerf Unt&tn Design 
^ex . 丈件 。 



,1 http://www.w3 H org/TR/xhtmll/DTD/xhtmll~strict *dtd ,T > 

<html xmlns= n http://www*w3.org/1999/xhtmI M xml:lang= tr ev i, lang= T, en M > 
<head> 


<title>Red Lantern Desiqn</title> 

<meta http ta equiv= n Content-Type ir content^^text/html; charset-utf-8 lf /> 
<link rel-^stylesheet 1 ' href- ,f /css/screen 一 new.css 11 type= M text/css <, 
media-^screen' 1 /> 

<link re 1- M style sheet 11 href^'Vcss/f acebox -css 11 type=" text/css" 
media^ w screen 1f /> . 

</head> V 

<body> \出现在厲 li ： 的方缺有 t 3 的样式表 

来控糾方块的外现。存太件中链掂 
tacetox ， cm i 件.倍 E 4 Rd U _ 

□以巧本身的祥式表后 9 


"p index.htinl 文件的标头里加人对 JavaScript 的链接与 JavaScript 代码。 


<!D0CTYPE html PUBLIC ， .- //W3C//DTD XHTML 1-0 Strict//EN^ 

"http j//www- w3.org/TR/xhtmil/DTD/xht ml l-*s trie t .dtd'^ 

<html xmlns= ,r http://wvFw*w3*org/l999/xht:ml” xml : lang= ,F en tf lang= ,, en ,, > 
<head> 


UvaScupt 丈件 & 

运#茇右样式表 
链毯下。 


<title>^ed Lantern Design</title> 

<raeta http-*equiv- ,r Content-Type ,r content^ 11 text/html; charset-utf-8 ,f /> 
<link re i~ M s tylesheet ,f h re f= f, /css/screen _ newness 11 type= rt text/css 1 ' 
media =,1 screen M /> 

<Xink rel= T, stylesheet" href 口 Vcss/facebcucss" type-'^ext/css 11 
media= ,1 screen n /> 



</head> 


<script src^ M jaLvascripts/jquery.js M type =l1 text/javascript M ></script> 
<script sre 二 "javascripts/facebox.js" type= M text/javascript H ></script> 

* jUj 扁： ^ ■ I H JP .ji 。 ifc.L- 1 aWB. ' ** ■ ■. W ■*Jr , - _ JT i-ft V-V'vS ■ _；i - ~ j ji m ifj® ; i a . ; . ■ ■ ，、一 ^ ^ ■ ' T " ' * j ■■画 

<script type m ， t text/javascript 1 ^ H 鱗議 

j Query (document) *ready (function£$> { 

^('^[relA-facebox] f > 、 

_纏劍 ... 

</scrxpt> 



<body> 对 ^Sctipt 的链戏下 ffi 展 一 ■) ■段 ^vaSctipt 代媒，用 

子浪备 Hce6ox p 以使在点在 I? 有遠劣 属台的 M 戏 
吋有所瓜应。 



炫后 hC£^>X 的遲炫拉字控制， H 值用 M 孩 
^丈衅鸟 ess 来铽腓闲页 i 的钕菜 D 
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使用前面的范例作为指南，为作品集分栏中的列表项加上 Facebox 特效。 
谓记得链接每个缩略图与其完整大小的图像版本，并在链接里提供适当 
的 rel 厲性。 


的作品議的 ©偉加 入链蠤_指南和 
©©薄的铰大版本。饺大的©倭将 
VA li$ht6ox 转绞罜规 0 

<ul id= ,f port ir > 知 a t 

<li><a title^ u View Detail’, href^"images/markinjapan _ large.jpg” rel= 11 facabox ,f > 
<img alt =11 mark in japan comp” src= n images/mark in japan, jpg" /></a></li> 

<liximg alt =l1 audio 2 go comp 11 src- t, ii^ages/a2g.jpg 11 /></Xi> 

<liximg alt^^^'rpm comp ,f src^wimages/rprtujpg" /></!!> >w 

</Ul> 请磘宏 S 经用</4>完全结 

束 < ( _ m 5 > 杉签，§本上苟 
杷©保达成链毬杉爸 S © 

的 St 字 ~^ 


诠祛 d 链掂与右窃历砺 
的兵系 6 本例中 • 它用子苦诉 

face$ox tit ^vaScrtpt t 何时右小 
括蘇链孩被点击^ 



^ . . …… 

H 

I rel 屈性用于描述 两个 资源的关系。以采用 Facebox 为例，链接关系指出采 
! 用了 Facebox 特效。本例纯粹是语义关系，但其他资源（例如 JavaScript ) 

! 可使用这个厲蚀，以不同干而对普通网站链接的方式处理这个链接。 

1 

j 

1 
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测试 facebox 



9瓸蘚答 


请看修改后的作品集标记，这是让 Ifghtbox 特效怡当运作所需的样子, 


»* 


<ul id—^poirt*^ 

<li><a title^^View Detail 11 href= ,, images/markin japan _ large-jpg" re l= n facebox** > 
<img alt- r, mark in japan comp 11 src- M iinages/markinjapan.jpg M /></a></li> 

<ii><a title- r, view Detail” href- ,, imagss/a2g _ large.jpg" rel-^facebox 1 ^ 

<img alt-'^udio 2 go comp" src~ ,i images/a2g.jpg ri /></a></Xi> 

<li><a title= ,r View Detail’ 1 href-^images/rpm _ large*jpg ,f rel- 11 facebox'^ 

<img alt-^rpm comp” src- ir images/rpm,jpg M /></a></li> 

</ ul > 



整 HTML i 件也 fl S 过 lightbox ^ ^ 


S 个铤孩部 t 5 Jg 

性_ 鋅 效对桡伶劣运 fl 。 沒苟这 一 
•) - 块 ® J 咖 Script H 知边执 



试试看。把所布图像与文件加人你的文件结构并于浏览器中加 
栽网页。看起来怎么样？ 

再使用另一种浏览器。运作得完全一样吗？ 
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:你提到 JavaScript 或许并未 

与某些浏览器完全兼容。如果用户 
的浏览器不支持 JavaScript 怎么 


有蠢舰 

I ®) . 如果我也能在 lightbox 里 

放入文字，当用户的浏览器不支持 
JavaScript 时，他们不就会错过这 

些信息了吗？ 


问 



答 


还是一祥，不同的則览器处 
理 JavaScript 的方式也不一样，而且 


, Rash 会不会是加入交 
互性的更佳选择？ 

令 t 要看你想实现的目标 0 如茱想 
要丰富 1 生动，多媒体的场景_ Flash 
是个非常好的选择，但本例只是要展现 
较大的®像而已。当然， Flash 也有它 


^ :问得好 s 并祚所有浏览器都支 
持 JavaScript 。 如果遇到这神情况，因 
为我们已迻链接到较大的图像 ， mz 
器或许会打开空白页来呈現链接到持 JavaScrip 〖的枝度，这是另一个谨法保证100%取用所有内容等）.如 
的 图像, 而不是呈现在屏幕中央的慎使用 JavaScript 的原因。如果要使果你的网站是基于内容的，最好以 
浮动方块里 e 用户需要使用洌览器用，请确保对于阳户理解門站而言， HTML 与 CSS 作为主要呈现方式.然后 


我们永远无法确定用户的浏見器支的限制（浏見器需安装外挂裎序、无 


的 " back " (上一页）按钮回到8站， lightbox 的呈现内容并无关鍵髟响々 


ff ] JavaScript 或 Flash 加上一点交互性 


但或许 仍可看到较大的街像 


o 



lightbox 玆果齑來不铐， d ■■…不知 
坻，这#弑能让大牮常常©剡我们的 R 站码？ 
我知坻 R 站的法计猥不错，侄用户不太玎能螫 
天狂按 F 5 剃新 A 克采等瘙我们的 T — 令更新 
呢…… 还有其 M 主 意玛? 



翮鼸脑 


你怎么想？我们还有其他方式来加入新内容 _ 
能让用户一直回来访问 Red Lantern Design? 
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博客带来新鲜内容 



利用博客保持网站内容的新鲜度。 


博客已经成为与用户逮立双向沟通的强大工具。我 
们貼上博客日志，用户则有回应日志与其他回应意 


见的机会。 


博客邀种相对简单、为网站加人持续内容的方法 —— 
表示你的网站会一： a 冇新鲜感，而且给了用户一再 
回來的理由 。 

博客也给网站陚予了 “声音”。你的网站不再是某 
个路人的网站，你可以通过博客文章讲话并接触其 
他人。 



如果你打算开始写博客，请确保你 
有定期写文章的时间。 

没有别的事能比“用户到你的朽站， 


犮现内站乙经6个; I 没更新"还糟，吸 
引读者的咁一方式就是提供某些新奇有趣的读物， 


； 而且要经常更新, 
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使阁 WordPress 加入博窖功能 

Jane 冋意这个想法她觉得新版 Red Lantern 
Design 网站添加博容功能会是不错的虫盘，这 
样,工作室人员可以发表设计类的文章、张贴关 
P Red Lantern Design 的新闻，并 il 通常也会拥将 
-个与用户沟通的更好途径。 

J a ne 做了一些研究，她想使用 Word Press 
(http://wordpress.org /) 。 为什么?让我们来看看 
一些 原因： 




要点 


■ WordPress 是开源软件——这表示有 
数以千计（说不定上万）的开发人员在 
世界各地贡献着他们的努力，让它越来 
越好 U 

v WordPress 只需要 PHP 与 MySQL 即 
可运作（别担心，如果听起来好像很恐 
怖的话，我们会引导各位>。 

_ WordPress 的安装过程简单得不可思 
议，（传说中）只要5分钟。 


_ 


_ 


WordPress 的特色是非常简单的模板 
系统，只要按几下按钮即可改变博 
客的外观。更重要地，自行开发模 
板也非常简单 （ WordPress 称之为 
“Themes (布景主题） & 樓板均 
使用 CSS 编写 • •一所以，如果你刚好己 
经有网站，而且想要博客长得像你的网 
站，只霈套用现有的 CSS。 

最好的一点， WordPress 是免费的！ 
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Theme Preview 





_ 起篡布的，设 d 来掩 ® 
WpdPie ^ 的 M 有秭殊功轱—起注作 


7 
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安装 wordpress 

为 Red Lantern PesignR 站渌加 WordPress 

想为 Red Laniern Design 建立博客并 It 它上线运行，恶嬰下栽 WordPress 
并设置在服务器上 WordPress 文件的下栽 位罝： 

http;//wordpress .org/download/ 



/redlaMfern 



jUUctp ; //w。 咖抓 。巧 / 下乎 
WoTdPwss. iMBT 栽的 D 本故 
往 Red Lanfem 的网站王 0 录下。 



/blog 




赵残定係存 Woid?7es$ 的0录重命名 

^ % 。 〆、^ I hU ?t //, e dUnt^Hde^ 9 n/ 

以。5获札 



将斯布下栽 t ) \tiQtd?^t€SS 的皮 
#1制蚵/沁5 0录中 a 



ik 托 穹魟钕 - 

WordPress 需要服务器上设 WPHP 与 MySQL (幵源关系数椐库）才能正确运作。如果你 
无法访问服务器或 hosting plan { 大多数网站1■:机都全而支持 WordPress) ， i 存到 Apache 
Friends 学习如何在本地端的 PC 或 Mac 上使用 X AMPP 来运行 WordPress , XAMPP 是一组 
可安装的软件，在觅面 b 提供一个可运作的网站服 务器： 

http: //www* apache friends. org/en/xampp * html 


396 第 10 章 












□ □□□□□□□□□□ http://www.pin5i.com/ 

会演变的设计 



完成 WordPress 的安装，为 Red Lantern Design 建立博客并运行 6 


习海 


❶ 




S6 3 运珐椽 fh 電重命名 >6 ^p-coniis-iAmpte.phf 




编辑 wp-config-php 文件并重命名，让其中的参数与你的设罝相 
符。 


// ** MySQL settings **_// 


define (’DB NAME.，/ r putyourdbnamehere 


// The name of the database 


definet’DB USER 1 , Vusernamehere'x ； // Your MySQL username 
define (’DB PASSWORD") r your password he re 1 ); // … and password 


definet'DB HOST，，p local host 


define( l DB _ CHARSET', f utf8 f )； 
dafinef'DB COLLATE 1 , 


// 99% chance you won't need to change this value 


© 按照安装向导的指示，在本地机器或服务器上架设基本博客。请记 
住，我们想从如 og 访问 WordPress 。 



接孩 WoirfPwss 安叕 
南 4 为 Red Untetn 




fHAl* prpvtdi Th* FftUMng iP'ortTHtOA. 


InsUIT WofdFtess 


i_oo 

cjjj 






1 c t 




ttfa- Ow* gjj 


(®> WordPress 


Welcome 


W%^.gn^ I# ?*!■* fjimcHiij fVvt m itUllit jgn iprK"1 r 實 W r^Y (0 iKCWT-t tm w 峙 




d-K^^fiEJS q^r, K yH# JWtTiiil in (N Wd H &t >0»Jf to 1^3-inf 

IM P»tT ih1ri^di&l« pmfotfm ipi ㈣ 

Information noocied 
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傅客 



Head First : 欢迎 Blog , 博客，非常商兴能邀 
谓到你。首先，我一定要问，为什么取这个名字 
呢? Blog , 听起来好像狗的呕吐声！ 

博客：什么？你确定要这样访问吗？好吧， 
我会接招。 u Blog " M - " weblog " 的缩写，结 
合 “ web ” 与 “ log ” 两个词，回到膊客刚开始 
的年代，那时它基本上是大家在网络 （ web > 上 
做什么审的日志 Uog > 而已（看了哪些很酷的 
网站、有趣的照片，诸如 此类） ——因此才取名 
为 weblog (然后再变成 blog ) * 

Head First ： 不好意思，第一个问题问得可能不 
是很有技巧。从早期到现在的样子，你应该经历 
了不少亊吧？ 

博客：那是当然！博客已经成为网络沟通的强大 
X 具。到处都可以#到博客，从个人网站到大企 
业的网站。太家都抢着赶上这股潮流1 

Head First ： 真的吗？这么多人都有博客吗？ 

博客： 没错，我可是在讲好几百万个好几百万人 
哦 …… 你自己算算吧。 

Head First : 哇！写博客的人可奥多。如果有这 
么多人在用博客，设置的方式一定非常简单。 

博客 s 呃，避的 • ”…但也不造。 

Head First : 是，但也不是？这是什么答案？ 

博客： 事情很复杂。 

Head First ： 那就对我们说明白吧，这不就是你 
的目的吗？ 


博客： 博客背后的技术可以非常复杂。技术部分 
足动态网站应用程序，用干在服务器的数据庳中 
保存东西（文窜、意见回应 等）， 以及使用服务 
器端的语言（例如 php ) 取出数据库里的 4 f 物 
并放在实际的网站上。幸好博客已变得非常受欢 
迎，对于各种技求熟悉程度的人都已出现各式各 
样的解决方案。 . 

HeadFirst : 嗯，听起来不错——可以谈谈这些 
方案吗？ 

博客： 博客通常厲干两大类 之一： 主机托管与自 
行安装。主机托管的博客系统是由第三方迮立、 
管理并维护的系统（用户通常通过容易操作的用 
户界面来管理博客>。因为服务位于托管厂商的 
服务器上.我们不需处理安装或服务器配置等问 
题。 目前有免费的博客托管服务（例如 blogged 
以及需要付费的托管服务(例如 movable type ) & 

Headfirst : 嗯，托管博客我已经大致了解 
了……自行安装呢？ 

傅客： 自行代装的博客系统基本上逛一套安装在 
服务器上运行博客的软件。它们可能比托管方案 
复杂——忙其是对没有服务器权限（或没有碰过 
服 务器） 的人而言。幸好，有许多自行安装的陴 
客系统（例如 WordPress ) 已让这个过程尽可能地 

简单。 

Head First : 哇，我从没想过有这么多关干博客 
的事情——感谢你接受我们的访问！ 
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完成 WordPress 的安装沿，请 看看博 客的版而外观。 


此处甚 /* W/URC 辦呈琛的祥子 



m, 苗月记事, 
茲外铉掮島悻客 
f 的分类， 


目前位置 
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Wd^Picw 4^7 "Welcome ± 

f , 博客 主页水 有现线的$矛内 
容。去各沄钎始玟馎窖后印刃蒯 


壎，我 R 不 
想吵崧你的義梦，乎 
过这个博窖齑起來不太(& 

Red laHtcrn Pesig « 的风 

^ ▲ 楛…… A 


( 分 * fTh) 


- *tKV- 


Worth A Thousand Words 

IlJv p ?rh MW 


Arthlvfi 


CAK^vief 


■ flm !! 

* r fi? Ch IJ C. j ： t 20 1 
■- ct 5 Cr 1 ： 1 ^ t' J 1 r > : 
b d j j^ich k ； C y.t^fv * I 
* lFCJI# j5^ ?fd r .. 


ftkpgroll 


■ Lfej 


r lhmi 
■ j, P 1 — 叶 r 
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mm 
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4 n«ih«r Stog 






























word press 的布景主题 


利阁布景主题改耷博窖外艰 
鸟感觉 


Word Press 的布妯土题让我们上传应用丁•软件的新设 tf, 以改 
变网站外观 a 布贤主题 ( theme) 足一组放在巨录里的文件， 
储存了新设计的 php 代码、标 id 代码、 样式与图片。上传后, 
即可从 WordPress 的管理而板上启动新主题。 



/blog 


这逐诨客的生 
罢 0 录 . 镝§角 
苟 WotdP^ess 丈 _ 

鸟 0 录。 



/wp-cowtewf 


f 即刁 4 音 S ® 扳 
的 Design 菜孝中启动圭蛀。 



WodPwM 的主 
赶网 ‘ 


译荀砗 f 圭鈕 邾放存 
/themes 0 呆下 & 



/themes 



Write Manage Design Comments 


Themes Widgets Theme Editor Header Image and Color 





各位可为 WordPress 建立自己的布景主题， 
以便搭配网站的其余部分辟看建立布最主 
题的指导说 明： 

http://codex*wordpress.orgrrheme_Development 



400 第 10 章 


























□ □□□□□□□□□□ http://www.pin5i.com/ 


会演变的设计 




唑，葙起采庹不错。我想用户将非常潢 
葱我们的工作。我拽不急待 M 想悬他们 
©在博害上的 ©应 J , 


ynq 


f 乏弟 face^cx 礙出 
的 lightbox 故菜 o 


Eo tno New Red Lonfcm DmJ 

■jfl wrC «- 
IM# w.M 1 mm* ㈣ f.V 
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工具箱的工具 



你的 Web 设计工異箱 

第10章已经收入你的工具箱，而且网 
站主页也已加入了一些新鲜内容。 



复习要点 


_你的个人网站就是你的公关利 

祖 

O 

■ 让你的网站永远展示最好、最新 
潮的作品，这非常重要。 

■ 新鲜的内容会给用户传达正面信 
息，并让他们再次回来。 

_网站应该演变（逐步改变），而 
不是经常激烈地大翻修9 

■ JQuery 是个已经写好的 
JavaScript 函数和控制项的函数 
库，放在一个服务器上的目录 
下，然后从标记中调用它们。 

■ lightbox 是种网页特效，用于呈 
现图像或其他 HTML 内容，它采 
用浮动在网页版面中央的图框的 
形式。 


■ 博客提供了一种保持内容新鲜与 
更新的方式，同时与用户建立直 
接对话的热线。 

■ 托管式博客系统是由第三方建 
立、管理并维护（通常由用户 
通过容易使用的在线界面来管 

理）。 

■ 自行安装的博客则需在自己的网 
站服务器上安装软件——需要某 
种数据库（如 MySQL ) 与支持 
服务器端的语言（如 PHP ) 
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Web 设计迖一行 
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在 Web 设计的书籍里讨论商业问题？你在糊弄我吗？各位已经楮通了前期制 
作V信息 架构、 导航系统、网站配色，莊至包括可访问性。在成为 Web 设计大师 
的逬路 h, 还少 r 什么？这个嘛……你还需耍而对 Web 设计这 个行业的问题。你 
不需要哈佛的 MBA 头衔，但 M •奸知道银行账户以外的世界……否则支票可能不再 
进来。我们将讨论一下如何逨立 a 好的客户关系，并了解属 F 你的知识产权。结 
果呢？利润增长并可以保护辛勤工作的成果。 


我进办法衮新褲孑3, ©为我的 
设计狨 ―宗乌我竞争的奴 eb 设计 
4 公茚值走3 。 


注意自己的工作+ 


进入新章节 403 




foo bar 


新的替在 窖户： Foo Par ^ ㈣ 

Red Lamern 的 Jane 刚发现--家可能的大客户 ： Foo Bar , 的客户 
一家需要在线展示的知名鉍厅。在你为 Jane ~ 

Red Lantern 贡献过那么多工作成果后，她希纽你能 
接下 Foo Bar 的工作。如果你能拿到 Foo Bar 的生意. 

JaneE 意支付丰1¥的报酬，而且 U : 你人股 Red Lantern , 





我也不县欢尚未答约的 ® a 
险的工作，佴我资#这顼工 
作是穩樣琺券的……为我们争取 
到达痒審户，好码？ 


Foci ^ 


[ 議 MB "I 

StdakhousQ & Saloon a 
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Foo Par 对 报价单 的期望 


O 为网站设计一页基本的 HTML 样本网豇，呈现网站整体 
的外观、感觉与布局。 

0 网站的配色方案，包括各种设计元索采用的色彩、在 
HTML 样本网页上呈现的效果等 

想出几个适合 Foo Bar 全新在线外观的商标与 logo 。 


篸子餐斤本染的違筑 
岛鏟满而想出的这些 


老扳手铪的 
商易版孝@» ^ 





foo Bai 的老板 ^ 









脑力锻炼 


h spcc work " 是指在收到支付款前就得先做许多工作，木例中， Foo 
Bar 的老板 希突先 看到网站椟型 + 才悉意与 Red Umtern 签约，你觉 
得 T Jane 为 什么通 常不愿意做 spec work 呢？ 
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给 foo bar 的快速代码 

—起为 Foo Par 建立一个饫逑模型 

目前，做出一个网页模型应该已经很简单了。我们先看看简易 
版 Foo Bar 网站的 XHTMU 

<1D0CTYPE html PUBLIC ir -//W3C//DTD XHTML 1,0 Strict//EK rr 

M http;//www*w3*org/TR/xhtmll/DTD/xhtinll-strict *dtd"> 

<html xmlns= ,, http://www.w3,org/1999/xhtml ,r xml:lang^ n en N lang- ,p en"> 

<head> 

<title>The Foo Bar</title> 

<meta http-equiv= ri Content"Type ti content= ir text/html; charset=utf-8*V> 

<Xink rel;”stylesheet M href-^stylesheets/screen,css'* type^^text/css 11 
media^^screen 11 /> 

</head> 

<body> 

<div id 二 ”header u > 

<img alt =,1 foo bar logo" src =,1 images/foobar _ logoopg 11 /> 

</div> 

<div id= tl navigation ,, > 

<ul> 

<li><a class-^active" title- 11 Foo Bar home.* href- ,l # , *>Home</a></li> 

<li><a title^^Foo Bar menu 1 * href= lf « ,f >Menu</a></li> 

<li><a title= u Foo Bar hi story Ir href- t, # ll >History</a></li> 

<li><a tltle-^Contact us ,f href- M # (t >Contact</a></i i> 

</ul> 

</div> 

<div id= n wrap_’> 

<hl>Welcome to The Foo Bar- Cold Beer Served Daily*</hl> 

<img alt^^foo bar storefront 11 srG= M images/foobar _ frontopg tr /> 

<div id= n content n > 

<h2>Get to the Foo</h2> 

<p>Lorerti ipsum dolor sit amet f consectetuer adipiscing elit. Duis a felis. 

Sed ac mauris eget eros vestibulum luctusx/p> 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis a fells * 
Sed ac mauris eget eros vestibulum luctus.</p> 

</div> 

<div id= u sidebar M > 

<h2>specials</h2> 

<ul id= ,r specials rt > 

<li>Monday</li> 

<li>Tuesday</li> 

<li>WGdnesday</li> 

<li>Thursday</li> 

<ii>Friday</ii> 

</ul> 

</div> 

<div id=-’footer’ f > 

<p>Copyright ^copy; The Foo Bar, ail rights reserved*</p> 

</div> 

</div> 

</body> 

index.html 
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穸鹿 


创建新的样式表 screen . css , 加入网站配色与字体 a 使用到目前为止学到的一切，为 
Foo Bar 网站賦予时尚的外表。请确认创建了合理的目录结构， index . html 文件里的链 
接也都怡如其分。 


body { 


margin: 0; 
padding: 0; 
background ； 

border-top: lOpx solid 
font-family: Helvetica 』 
color: #fff; 


sans-serif 


h2 


margin: 0; 


color ： 


#wrap { 


margin: 0 auto; 
width: 800px; 

background:. . . 

border-left; 5px solid i 
border-right: 5px solid 


#wrap hi { 

margins 0; 
padding: lOpx; 
text-align: center; 
background: 

border-bottom: Ipx solid 
color: #fff; 
font-weight: normal; 
font-family; Georgia^ serif; 

} 



#navigation ul { 

padding: 15px; 

} 

#navigation ul li a { 
color: 

囑 P A V ;■ V -I W -I 

font-weight: bold; 
font-size: larg^; 
text-decoration : none. 

} 

^navigation ul li a，active { 
color: #fff; 

#sidebar h2 { 

background: . .. 

margin: 0 0 lOpx 0; 
padding; 5px; 

) 

#footer p { 

margin: 0; 
padding: lOpx; 
background: 
text-align: center; 

J 


B 的的老叛趄偁的各 
神毯衫鉬合， 我出最 湟合廠 
© 的毯彩„ 



screen.css 
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foo bar 进行中 



以下是需要加入色彩的 CSS 文件的_部分。一起看看最终的代码以及网站的模样 


o 


9* 蓐答 


哲 f 送用蚤洼的柱®, 
深一点的核毯 。 


f 这桮则 采用略 


body 



margin: 0; 
padding: 0; 
background ： •站 

border-top: lOpx solid ^.,S6cfia?e ； 
font-family: Helvetica, sans-serif; 
color: #fff; 


h2 


margin 

color: 


0; 

社 6dBe&4 


#wrap 


margin ： 0 auto; 
width: 800px; 
background:_ 

border-left: 5px solid ^I^ZwAflQR ； 
border-right: 5px solid 

} 

#wrap hi { 

margin ； 0; 
padding ： 10px ； 
text-align: center; 

background: # 553iZd ： ^ 

border-bottom: Ipx solid 
color: #fff; 
font-weight: normal; 
font-family: Georgia, serif; 



#navigat!on ul { 

padding: 15px; 

} ' 

#navigation ul li a { 

color: ... 井自相 M 妓 ; 
font-weight: bold; 
font^sizer large; 
text-decoration: none; 

} 

#navigation ul li a,active { 
color: #fff; 

) 

#sidebar h2 f 

background; . 並 55? 辟 4 

margin: 0 0 lOpx 0; 
padding: 5px; 



screen.css 



} 

#footer p { 

margin 


0; 


padding: lOpx; 
background ： … 接跋 _ 

text-align: center; 



< di ^> 3 a 用嵌深的榜毯*鸟佥意 
的 亡字和 浅椋色的 籽罟衫 威线找的比。 



/foobar 


cj ^ HeaJ 网站下裁另今 

Foo Bai 网站的辦有 3 E ■件。 
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- iilS ———————— 

创逑（或下栽） index.htmK screen . css 及 Foo Bar 需要的阁像。启动你的浏览 
器，向 Foo Bar 的老板展示你的布局与配色。 



A -I l^tnut nyll- ft*0 5*t d_; FT^n. 

以 ⑽ A nm,v A 

挪 PrgiwUi^ Qfn^^as yj ™ 切 1 flf JV 1 ^. I3u* EK 


hyvf r. 如、 ™ ty'ilCiiiX k'lTV^lHS-.ru 
tiVrt^i k^vi^s 

ck*3^ 

S <4 PC ( twuni ； 咐 t 机、 vi ' i&tHilyin *uA 
■ rfV'fXT：^ L _:.:no 


lillXWJ 1 . 

■m 、 ir_ ， j'! 


认 _rV-_y 

nw 」，， 




.i-JL^t-l-'S 34.x* 


对不起， RedLaMterM 。 我不 
舂砍俅们的 作品， 我麥迭择斟 
人■■…•采用完全不一梯的坏項乌 
苺觉。其不好衮思 f 


Welcome to The Foo 批 r. Cold Beer Served Daily 


*oo 
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剰窃? 


5个19后 



is 4 Foo 的沔站。卷坦来盎4 
嗥热， 不 甚鸣? 
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, ‘■«?© 眨啡 



I 

s:i 9fc 飱蜊？ ？ 


6 佘眯糊 ilr ^tl 运 su 石 ± [JJr 抹*囫44笨驛叵 sleK- _ 赃 ui —傑迄 & 汝 
馅坩崗 。拽驷 茕灰埋盹 iiURg •極叵睦雜坩统雔 suer 掸 C--ST 卜胲麵销 S 梂 44 甶 宕^部 


0& 
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盗版设计 


■r 


习思蘚答 


以下是几个我们在 H 两种版本”的 Foo Bar 网站中发现的相似之处 







佔们 使用5裁们沒丹的。奸字螌_伐栘 
除5下®的汰字 g 


鱿逢纪色也一 
样.*，*■. f 也们恨 

冰明 g 汝变， 


4軚系统不4 
居中， S 字 f 本 
15过紅傲他 
代整。 


Welcome to The Foo Bar Cold Beer Served Daily 


SpecUts 的倍里 

J r~ f 

■ I 手 •■••_- 龙全 
■ 砗 / 



有盘问風 

有麵涵 

1^1:这些该不会真的只是什么不 1^) ： 但在万维网上，大家不是都:好吧，他们的确是抄袭。该 
可思议的巧合吧？有这种可能吗？ 抄来抄去吗？ 


怎么做呢？ 


答 


这是应该问你自已的问题.但 


答 


唉，老诺 一句： 你的朋友都在 


答 


好问题 


通常很容易四答。当两个 M 站相似的做，不表示这件亊就是对的。如果每 


铉度这么尚时. 很难軔 信其中不牵涉个人都跳崖 


这样讲应该够清楚了 


到创意的剽窃。即使尝试开发外观类呓，是你辛辛苦苦设计的成果，你应 
似 Foo Bar 的門站，你所做的改变说不该有权声明自已的捆有权利， 


定还比上面史多 


4- 
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欢迕光临 设计海盗乐 D 

模仿就迠坫奸的贽美。但如果偶然来到一个显然抄袭你的设计的网姑呢？ 
问题在于网络世界使复制(和偷 窃！） 变得非常非常简单 & 标记源文件可 
轻易被石•见（而 a 可被钇制），图像也能较易 f 栽到本地端，要釔制 css 
也很快速。 


我们究盘可以怎么办呢?首先,很 m 要的一点，如果你创建了自己的网站 
(而 E 网站是原创怍品时） t 你就拥布著作权。再来，你不需要在网站的毎 
一页加人著作权提龊.即 Li 拥有该页的著作权，你的设计已经拥有茗作权 


T! 





原來我们拥布荖作枳嗬，太好？；不过，达 t 
妹最什么？ fc 果荖作杈狨依犯3,究凳可认怎 
么傲嚷 7 


写封有礼貌的电子邮件。 


嬰求设权网站的拥苻者刪除厲于你的著作权范围内的设计。 
不管你如何生气，濟保持礼貌。如果保持礼貌，疫权者更 
可能会回应你的淸求， 


—射电子邰 辞的豉 果含让 
各色邦常核访 u d 常，利 
窃的人郄蜡中躬莹琢5考 
未运不会发现你知迮6^ 


寄出后续电子邮件，并复制 Google 结果。 


如果没有收到回应或是对方 的回鉍 很不礼貌，再寄一封电子邮件， 
并转寄给 Google 的 spamreporl @ google . com。Google 承诺会对明 


M 的 Q 犯著作权行为有所反应^事实上，因为他们在乎，所以他 万链 网很总 Aj 
们对以 权行动的反应可能包括移除或关闭对侵权网站的访问。 


0 咨询著作权律师。 

如果这些举动都 无效， 则需走法律途径。至少，律师可以对侵权者 
提出终止及停止禁令 (cease and desist notification ) 如果你想，律 
师荘至可以把权网站佐 b 法庭，或许还能要求损宙赔偿9但沾记 
得，著作权律师不便宜哦！ 

V 这_场在的是蛊后的手磁。螬禕旰 g 
秸很伕敖会挖费很多 
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在网络上解决问鼯 



Unauthorized use of copyright 

2 messagds 


Red Lantern Design <redlantern@gmajI.c 

Reply-To ； redlantem@gmail.com 

To: The Foo Bar <conlact@ttiefoabar.com> 

To whom it may concern. 


Sat, Nov 15, 2008 at 2:17 PM 

— 保抟札统, 到紿茲 IJ it * 

f 明伪的耷忍 ■ 單打 4 来表 

4 a … 


tt has come to our attention that your establishment is using Qur (Red Lantern Design) copyrighted material without pei 
mission. We had recently written a bid for your company and it appears that the design we submitted for consideration 
has ended up as your homepage. We were not notified that we had won the Ud and received no compensation for the 
use of that design or far our services. We are asking you to glegge remove the material from your homepage and dis¬ 
continue any further uwof our copyrights or risk tegal action taken on our behalf. 


Thank you. 

Red Lantern Design , LLC 

The Foo Bar <contact@thefoob«irxom> 
To: redIantem@gmaiLcom 

Red Lantern. 


We are terribly sony for the misunderstanding and Ws obvious that the site we have posted definitely looks strikingly 
simlfarto the design you submitted. We have removed the copyrighted material and are no longer using any designs or 
logos associated with Red Lantern. Again, we appologize for the misunderstandir\g and hope we can avoid any ami alt 
Clegal actioft?^tease let us know If there Is anything else we can do ； 


[quoted text hidden] 
Sincerely, 

Fqo Bar Management 


五恝沒 想到戟们会看到他 们的网 玷，® 


Gcaail 

Pt'TA 


翊碥、 


托貌 


iE 式 


联系玎能的设 计僵 杈问題时， 
应清楚 


Red Lantern Design <redInn(em@gmaiI.com> 
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迖种 rt 况稂5劲 f 我 一点邾 不想处 af 十么僅犯著 
作权的问«。我 H 昱想设 计网站 f 


Web 设计师不只一种类型。 

有些设计师只 想设计 网站。有些人则打算开公司,因而钻研各 
种报表。当然，更多人落在前述两种类型的中间 & 就算同样屈 
干 Web 设计的 世界, 也有很多不同的角色。你正在疑惑干该烦恼 
Web 设计的哪个部分吗？ 

你认为自己是哪一种 Web 工作者？ 



箾 fe 设计# 


这场工 <1 2 罢仔用 HTML ^ CSS , 前 

含钵.#费贵网站大部分的用戶界® 
的連立。 



(|总 穿构讦组识内容斿说 




o 

信息絮构# 






用户体验设计师 


©像诠 i 十师 


© 像设幵邨芍戗4禽线杖态下设0 ^ 
户界®， fl &© 衫无棄 +轉島前会设 

4师紧密合作以貪规界 © 。 


用户钵始设 t ■子師鸟整个团队合0 幵发及 
苟一致 ft , 可用沒的界他们也芍秸玲 
贵 g 用性測迓的执行扣菁理 


费 t 铽写控射两 
站功錄的后台代 

写？速兰 
«AX 功秸 



奋一螫大型的设0工 Of f , 
疋索 ( cop ^ mkei ) 弓以访助違 
左成钨写场0所 f 的内容 3 




夂策 


程序设 i +# 
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你是哪种类型的 Web 工作者? 





请回答 Web Worker Job Poll 问卷，看看你属于 Web 设计界的哪个部分。加总你的得 
分，并对照下一页底端的计分栏找出适合的类型。 


你是##类型的 Web 工作者？ 

请依照你对所述任务的感兴趣程度，圈选毎题下方的数宇（用 I 到 5 表示， 1 
=不太有兴趣，5 =非常有兴趣，依此类推> 


o 我審欢缒茸支转网站沟容管理认及鸟数据库亙动的代码。 



2 



5 


© 我希望碓认闲户能頫利在网蛄里游走，而 m 蝥体设 i 十很梯，义能适 
当 M 运作。 

12 3 4 5 


O 我舂欢处理诒窖 a 组织网站上的信息。 

1 2 3 4 5 


O 我真的锒舂欢设计，佴我也希望能编写一点代码。 

1 2 3 4 5 
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© 我很揸长媼写 HTML 鸟 CSS , 也很舂欢把设计©转换为标铊鸟样式 
表 o 

1 2 3 4 5 


© 我舂欢利用 JavaScript 鸟 AJAX , 让 R 贡的表现鸟桌程序_ 

样。 

1 2 3 4 5 


O 我喜欢难察其他人鸟 R 蛣苴动的方式 t 进而学习闲户的模式。 

1 2 3 4 5 


© 我舂欢思考导航系统的问瓸， 认及 对特定项目最重要的的窖。 

1 2 3 4 5 


参考下列说明，了解你适合 Web 设计界的哪个 部分： 

如果在©到©题获得8分及以上，你可能是名程序设计师。 
如果在©到 © 题获得8分及以上，你可能是名用户体验设计师。 
如果在€1到 ® 题获得8分及以上，你可能是名信息架构师， 
如果在©到 © 题获得 S 分及以上，你可能是名前台设计师。 
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企业结构 




好咆，我是前 S 设 计#, 俅手盞这 
桴……佴蛊这鸟处理筹作枳邡些闲 
逛布什么兵系？ 


根据自己在万维网里的位置，选择你的工作——以及你 
的企业。 

如果你很乐意待在网络公司里做设计师，著作权问题或〖午短 
期内不会來烦你 3 不过，你为 Jane (还有你的老板）做出这 
么多绝佳的工作成果，或许将来会被要求加人公司领导团队。 

或者，如果你对于经营管理与企业家的身份 K 的很感兴趣, 
也昨会想自己成立一家公司。认识_己，布助干选择正确的 
公司以及选择正确的人。 

如果你 E 的非常想成立6己的公司，还耍考虑公司的类 
型……就像 Web 工作者也布众多类型一样。 


㈣ 賴 j ⑼ m 
Kk 兵儐部 累轵在釗泠人的 1 人 



独资企让/含仪企让 

(Sole Froprietor/Partnership) 


uc 连邦常坍的企 iHfl 识类 f , 或 

兩有不阌的棵尨。 ac (或称 ap ) #釗泠 
人祛併独資经營的尚荦伐 # 又有企 it 的个 




4人©体是蚤1杂的企处锘均。公司本房 
衫成 ij &的法人食体 t 经營的需遵夺产格 
的现則 。 成孟一袭法人®体也 g 钧0常昂 
责，兩 A 极度霜龙优秀律師的参鸟。 
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(Limited Liability Companies) 
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请看下列各种关于企业的描述，并于旁边的空格写下它们的类型，是独资企业、 
LLC 还是法人团体^ 

事让描逑 

Jim 和朋友共同拥有一家小设计公司，他们时 
刻都在工作公司支後他们两个人的生活，目 
前他们正打算寻找系三名设计人 S 3 来协助项 a 
工作 P 


Joe 是一家大型电脑公司的专职人员，空闲时 
间則为附近的公司和朋友建设网站，他赚了一 
些外快，忸还不够他的財务支出 4 


Green Giant Design 屬用了 4名全职人员，而 JL 
每年的年收入都达到6位数，公司老板是创意 
总监，也很满意她的公司维持较小规模并为地 
方企业服务的亊实， 







■ A -ft A k 



3娌 


Nationalweb 是家大型设计公司，在芝加哥 
与纽约都有办公室。他们大多数的容户都是 
大型跨国企业，他们甚至还考虑在伦敦开设 
欧洲 分部。 


目前位置 ► 419 














给新客户的报价 



让我们看看各家公司的结构与组织方式 


3娌解荅 

■I 

擧让摊迷 



©#这暑合 R 芙系 f 类似 WC 的较 iE 式企让 

结构会垔#(|合 3 4 {5, 这样 g 容鮝赴理 
时务同 IS D 


Jim 和朋友共同拥有一家小设计公司，他们时 
刻都在工作 & 公司支援他们两个人的生活 ， a 
前他 m 正打算寻找第三名设计人贸来协助项 a 
工作 D 


Joe 是一家大世电胲公司的专职人员，空闲时 
间則为附近的公司和明友建设网站 。 他赚了 一 
些外快，但还不够他的財务支出， 


Green Giant Design 展用了 4名全职人员，而 
每年的年收入都达到6位数公司老板是创意 
总监，也>很满意她的公司维持较小规模并为地. 
方企 ik 服务的 T 实 u 


Nationalwcb 是家大型设计公司，在芝加哥 
与纽约都有办公室，他们大多数的客户都是 
大负 的跨国企业，他们甚至还考虑在伦敦开 
设欧洲分部& 


LLC 


独资企 It 



外牧入只金达 现在 估的个人收 入统幵 粒孩罢 & 


UC 


虽玆 Cfieen <^Unt Design 弓以烃务地®成 
企必，住€)前只 f 罢 ac 弒够了 5 ac 


法人©体 


« r A ■ ■ fl * « rii -k 


■ ri* B * I * ■ 


I « ■ * H 


^iationaUei 的公司经營 0 经 f 图化 

甚至3戗连命 ©坛 化。裘的智的企 • 
旮绍构送择将差沾人囝体 
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RedLarttern 是认 LW 的方式运作我们坯进布大 
到翥要组成法人©体，孖设一宙 lcc 也不含 
太琢赛。苒谀.我中愿茌时闵导技斩窖户，也不 
想处 a 更多文孪工作。讲剡新察户 


Red Lawtcrw 预期中的新窖户 

Jane 刚收到一封电子邮件，來自一家以旧金山为根据地的新创公司， 
Trilobite Labs， 他们需要一个新网站一越快越好9 Trilobite Labs 建 


造广一系列很棒的 iPhone 应用程序，他们的网站需要反映该公司的 
设计美感，俱没时间（或没有专业技能）行己动手做^他们非常莒欢 
Red Lamern Design 的网站的美感，而 Jane 希領你能砰 度貧制 成功的经验。 

以下是 Trilobkc Labs 的期望： 


窖户 f 求 


n 


一 个具铪虫页、关于 （About) 诋面、 联络苽面及三 
种产品分沉的靜态网站。 

与标准相符的代码。 Trilobite 的网站还必须能在各种 
设备上运作， 


作品旭的分区需采用某种屏幕特效。 Trilobite 希望 



5^ TtiM 心制5的 iPkhe 应用锃序之一 ，可 

认 A PP k 连镝店，用 户名用 昀买蚤 
新的 3 Q iP / mne ; 排氐。 


以新潮、时尚的形象來展示他们制作的 iPhone 应用 
程序。 


提出多种设计以供选择（纸 h 的设计图即可> ，可 
对设计提供反馈盘见，乩反馈盘见将整合到锻终的 
网站设 t 十里。 


低调的可用性测试，在网站上线前确认没夼任何问 
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网站的成本 



磨笔上阵 


知逬网站的制作耑求后，请思考一下违设这个网站的成本以 
及完工所需的大槪时间。淸于下列空格内®人你的怙算。 


时 K ) (小时) 


成本（義元) 



只凭我的鞲 谢喝？一定还有更好的方式。 
爯说，成本 S 谈虽我们的討®总和吒7我 
该怎么订出含理的时箱？ 


你需要知道自己的时薪，才能签订工作合同 a 


无论是自己接洽的工作 、 Red Lamern 委托的设 
计或是而对大型公司，你都应泫知逬自己飪个小 
时的工作价姐。然后，才能计算完成项网所黹的 
时间，再转换为苏实1合理的报酬。 


你斯望的年性入 


最糟的情况就是报价过高或报价过低 & 前者1上你 


接不到工作，后者则 U ： 你赚不到钱！以下是个讣 


算合理时薪的简易方式 : 


时薪 060,000/ ((8x5x501 x. 601 


—稃中的作的數（莕夭 8 士 
的， S 用5 天. 备年 SO 用）。如采 
想句朽幵让， 这个公式萁甚并常 

俘忐 : J . 




P •电 60%的的问真的秸 
巧价，辦以龙 把茧年的工 
作时教乘以 0.60, 


巧 0 奚元/小时 
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磨笔上阵 


现在请思考网站设计的每个步骤所需的时间，并于空格中写下 
你的估算。 


曾.) ■纣 數。 

扨飽按资时间 

这是刚开姶与客户开会，了解客户需求，并知近客户有什么 

期 M 所花的时间。^ .. 

概念构思时问/前期制作 

前期制作是我们研究网站内容，设计信息架构并想出 

分镜表的步骤 U . . . . 

箪©鸟设计修订 

这是绘制草图与修改设计的步骤，聚焦于客户网站的最终 
概念。清务必加人客户反馈意见的时间， 

制作时间 

开始编写代码的时间^ HTML , CSS 与 JavaScript 可能都 

会在这个阶段出现。递交最后的设讣 成果。 ....... 



其 他费用 

这部分可能包括车马费、材料供应以及其他该由客户支 
付的 时间或 材料费 




:哇，我完全不知道这些事情 
需要多少时间！ 

答 :没有关系 • …尽你所能猜猜看, 

网想你在各个阶段所做的类似项0 , 
试着计算当时的工作时数 D 只要大概 
的数值 a 


—— T 犮醜舰 - 

々有蠢祖 

我只能计算实际工作的时数, 
不包括休息或其他事情，对吗？ 

实际上、你的诒计时间里应该 
包括整个项9所需的时间，也就是包 
括休息、出去昀买必需用品以及任何 
关于制作某令项目所占用的时间， 


: 如果还有其他人与我同一团 
队，该怎么办？ 

^ :好问題，在这种情况下，两个 
人工作一个小时等于两个工时。所以 
你要估计项目需要的"工时"，而不 
是大家每周或每天工作的时间。 
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好网站需要时间 


笔上路- - - 

觯荅 

设 计一个 R 站有哪些实际甭求? 


如飽搲资时问 

这益刚开始与客户开会，了解客户耑求，并知道客户有什么 20小对 

期错所花的时间。 . . ... .. . 

色尨幵含5个小时.專窗0究 f 3 个0 的 
以双用孑交递的穿砗时 



概念构思时间/前期制作 


前期制作是我们研究网站内容、设计信息架构并想出 ^0^^ 

分镜表的步骤 U .. K 

^ 囝鸟 分统表 g 秸 f 龙琢凡在右的时 
问力秸完 J 

箪 ©鸟设 i + 修汀 


这足绘制革图与修改设计的步骤，聚焦于容户网站的敁终 40小时 

槪念。请务必加入客户反 i 贵意见的时间^ . . 

根菇 審户対子荦® 的反左，这个# 
槔的新需吋问変动很大 ， 



制作时问 

开始编写代码的时间 HTML 、 CSS 与 JavaScript 可能都 
会在这个阶段出现。递交最后的设计成果。 



这段的问邾在注户威甚。杉仿，祥式鸟 ££^K 
代鉍 、 代砝. 


其他费用 

这部分可能包括车岛费、材料供应以及其他该由客户支 

付的时间或材料?^ . . 

额外 的交递 的间、下游承 色葙的 
f 用 K 洎耗甚部4子这一类的间 


10小时 

7 ……… 


« 
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计 翼总价 


窃 几页 妨筠出的的 M 

€ 

时薪 “6ft000/IBx5x5(»)c_6m 

(140 小时) x P 50.00/ 小对卜 ^7000,00 

这个价格甚的蓊50 粪无的 个人工作老龙威— 


个中 .)* 型网玷所電的花费 


问 : 我们需要拥有 Web 设计 
界的各种人才才能成功 完成一 
个网站吗？ 

答 :不见得如菜你是秧力接 
案的 Web 开发者，或许一个人就 
承把了多项职贲 + 而 1 能够在整 
个过莊中与客户协调好工作。若 
有需要，也可以加入外 包人！ 4 , 
完成一冬你无法胜任的工作（例 
如后端程序设计>。 

N ： LLC 与 LLP 有何不同？ 

答 :两种结构本廣上相 
同 * LLP 是 Limited Liability 
Parniership 的婉写，其实是具冇 
较多胶东的 LLC , 大多数时候， 
会计与法律斧提供专北肢务的公 
司，其纽织经常采取 LLP 的形式 4 



问: 每小时 50 美元是平均值 
吗？在一家设计公司里，时薪 
范围大概达到何种程度呢？ 

^ ： 每小时 50 美元其实算 
低了 9 专业组的时薪从每小时 
50 〜 75 美元到每小时 200 美元不等。 
时薪的差距依地 A 、经验与公司 
规糢而定， 

R :如果我低估了完成网站 
的需求时间，会发生什么事？ 

An 

: 这种事情经常发生 。大多 
数项 0 都包 括了预 始结案时间. 
最终贤用可能比垛本的预其史高 
或史低 u 你能努力的最重要的亨 
情就是与客户沟通.让客户知道 
工作进仟的情况，以及最终花资 
与原本估计的相差程度„ 




^:哪些资源能找出其他人 
收费的多少以及其他设计相关 
领域的服务收费状况呢？ 


: AIGA (American Institute 
of Graphic Artists ) 偶尔会为设计 
从业人员出版 《Pricing and Ethical 
Guiddines 》 （收贫 • 与 X 作道德拍 
南），其中包枱 H 站设计的薪资 , 
时蓊与业界 标准， 


AJQA ^ {{Piiaitj and 


Cfuidetinen^ 
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项目估算 




磨笔上阵 


对一般网站设计项目所耑的时间和成本有了更多认识后, 
让我们利用 Red Lantern Design 项曰的估算工作表來预估 
Trilobitc Labs 项目的报价。淸在你在估笕时间成本时已经考 
虑到的客广盅求前打勾。 


容户 f 求 

□ 一个具备主页、关于页面 t 联络页面及三种 
* 产品分页的静态网站。 

□ 与标准相符的代码 。 Trilobite 的网站还必须 
能在各种设铪上运作。 

□ 作品集的分区锯采用某种屏.嵇特效， 
Trilobite 希望以新潮、时尚的形象来展示他 
们 制作的 iPhone 应用程序。 


提出多种设计以供选择（纸上的设汁图即 
可），可对设计提供反馈意见，且反 馈意见 
将整合到琨终的网站设〖十里。 

低调的可用性测试，在网站上线前确认没有 
任何问题 0 


Red Lantern Design 项目估算工作表 


任务楛逑: 

客户名称： 

项目描述： 






■ 



如痗按资 时问: 

客户 会议： 

背景 研究： 

车马费： 


小时数 时薪 总计 

4 


x 


X 


$7 5 / h ' 


S 300. 00 
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前期制作时间 

内部会议： 

信息架构： 
Wireframe： 

主题概念： 


莩® 鸟设计 修打: 

客户 会议： 

分 镜表： 

分镜表修订； 


小时数 


■ » « V I 




时薪 


X 


X 


X 


X 




» ■ » 4 ■■ ■ 


X 


X 




总计 


¥ B 3 ¥ ■ P 




:屋 制这蘇 Z 作表/ 

玲㈣糾 1 料曲在 ff 的® 


制作时 间： 

XHTML 与 CSS 
后端程序 设计： 
美术 设计： 

文案写作： 

认证与调试 ： 


杂项支出 

字体与图像 
软件 ； 

一般用品： 


总价 


x 

X 

X 

X 

X 


X 

X 

X 




4 ■■琴 fl 






项目总小时数 


总成本 
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项目估算 




磨笔上阵 
蘚答 


对一般网站设计项目所需的时间和成本有 r 更多认识后，让 
我们使用 Red Lantern Design 项目的 f 占算: i : 作表制作 Trilobite 
Labs 项目的报价。请在你在估算时间成本时已经考虑到的客 
户需求前打勾。 


窖户甭求 

^ 一个具备主页、关于页面 V 联络页面及三提出数种设计以供选择（纸上的设计图即 
种产品分页的静态网站。 可）， 可对设计提供反馈意见，且反馈意 

与标准相符的代码^ Trilobite 的网站还必 见将整合到最终的网站设计里6 

须能在各种设备上运作， 〆 

作品集的分区需采用某种屏幕 特效。 低调的可用性测试，在网姑上线前确认没有 
Trilobite 希望以新潮、时尚的形象来展示 任何问题^ 

他们制作的 iPhone 应用程序《 


Red Lantern Design 项目估算工作表 


任务 摊迷; 


T2tio6tte La 6 s 



仔多描 £ i 阇短地衹这墒 0 
多 柰孑, 仔务描 ( i 有助吁 


客户名称; 
项目 描述: 


二个史 H ??? 免辟 卑允 L ?., 寄/，免坪译分 

mmn :、 



争 



扣始捣资时间: 


小时数 

a 


时薪 


客户会议: 
背景 研究: 
车 马费： 



x t ^$y5/hz 
x $15 /h 


时号场 E ) 的初诒阶段. 20个 .) •的在茂足誃 Ci 个 p 段多丰 
用子研究，卷昜審户 M 存頜域的與他公司怎么傲。这荀的也 

你# 竞等分科 （competitive 6 


总计 

$300,00 

■>vafl-enHi>ii-«»!fii» 4 i 

$/500,00 

$75 . 00 
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5 时问鸟舍钱。 


f29 hputs 



项目总小时数 


总成本 
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前期制作时阅: 

内部 会议： 

信息架构： 
Wireframe： 

主题概念： 


箪铵鸟设计修打 

客户 会议： 

分镜表： 

分镜表 修订： 


制作对间： 

XHTML ^CSS： 
后端程序设计： 
美术设计： 

文案 写作： 

认证合格与调试: 


杂顼支出: 

字型与 图型: 
软件： 

~般用品： 


小时数 

时薪 

总计 

2 

x $7 S/h 

=$f50,00 

f8 

jc S75/h 

=$f350,00 

(0 

x S 15 /hi 

=$750,00 

6 

x S75/M 

=S450.00 



窗阱钊作很 f 褢， 如果工作正礴 ■ g 以 J 

省下埒多吋问及 S 免 g 后的共痛確!^ / 

2 x $75 /h = $150.00 

f5 x $75/ h ^ = $1125,00 

5 x S75/At = S375.00 




輩 ©岛制作的 间及你的设分孖诒发劣发热的时 
鎮。茗户此的第一次看约窗®投资的讨问书3 
付么样的 成菜。 



30 
0 
f0 
2 
4 


x 

x 

X 


r v « ■■國 


X 


$15 /h = $2250,00 

■■論 " ft * A 4 A A # ■ "fl ■■'■!■ 

Sjs / h ^ . ^ so : oo 

$75 /h = $750 r 00 

$75/Ai _ SfSO.OO 

'■甲，■琴琴嚶■琴*琴丨■琴■.琴■琴嚅甲嚅，琴■■甲 

$75 /h = $300,00 


■ * a ii A A I 


这#主出斿訂以 .) ■时幵 价，递常基咸 
本价如I： _点 利消 L 



丨酗画》«_叠_1>嚆1 


X 

X 


$200,00 

$55,00 

H I ■鱺 

Sfoo.oo 




V V 

价 

总 
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Web 设计不便宜 


Trilobfte Labs 党得你的估价布 A 
S 。 我们不陡爯关去 g — 个机 
会 . 有计么 主涣场 7 


我们建议讨价还价。 

潜在容户看到报价承后，立刻皱符屑头说价格 
太髙，这垃个可以预见的结果。如果你有经验、 
对+自己的设计技巧有信心又认典地评估了项 
E] 的成本，此时，向潜在客户解释形成这份成本 
估价的原因则屈千你的职责之一 a 

回应客户而调整报价并不算“违反规! nr a 侃 
除非理由牢不可破、否则不应该受到容户的威 
吓而降低收?^这样不但会降 E 你纾为一名设 
U •师的价値，还可能把超出报酬的工作最放到 
项0里——这是自毁前程的方式，而不是经营亊 
业的好方式4 


0 
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使®棧索书 
对窖户传迖洋细报价 

提案书为客户详列所有成本，但也可以让报价的根据更为淸晰。有 
时候，客户只是需要各项成本的概要即可了解你为项目带采的价值。 



發超 


使用下面的模板，在建议书里列举 TrilobiteLabs 项目的概要.让他们看到我们预备执 
行的工作以及他们的钱会花在哪里。 


我们霜龙知迮写 
价的0期。 


分析嚴务島性费含 
诂助客户了解戧们 
的 H 


这部分甚故島含 
同条炊 a 



—份戎宏丹剌表 g 
让客户了箱场 D 龙 
威的残竹吋问。 



































著作权与授权 



习 鵝蘚答 


谨致 


0期: 
服务: 


费用 


计划表 


亲软 


以下是给 Trilobite Labs 的完整提案书。 


TiiioAite La6s 

{ 234 Michigan Ave 


i*a*a*a*i*i*i 


i * K - * B * B 


2008 » M 24 0 

一个 6 f _) 8 费的网站.僅用符合秣油的代砝, 忽轉 所节信 Jfi ■设 t •寸 
©肜輿本设 V 十以蛊 XHTML 网页樓板。 


规到鸟笏期制行 


$4575, 




B * fe * B * d - l ! H «- i*B 


■ * i * B * B * l*i 


-k * si i 


设分 #®__ 

- -- 

_ ■ n ■ m m -m m m m ii ■'■■'■■■ m M m m A m ii h A ■ ii 

运价 .. 

4 用： 逢交 JA 島 witdtAme 

■ .■邏 ■!«!■■■#■■■ #<■»■■»■■ 149>>1睡，《» 

8 J 2) ； 议錡莩 ©鸟咏 O 

f 6 j 39-" t^Ss . 


.$(650. 

ifc 1 * ■ • * -fi *■ -fi * « * -H * 4 i -h 4- 

$3450. 

■ 4 ■ ii A 4 hi A i> ii ri> « i> « d< ■ ri Ad' 

•S355. 

p t » v w r v w i t ，乎 » - *■ ■ ■■ t m 

-$f0 r 030. 




■ » •■ 4* ■ » ■ 


■嘤 IV ■嚶 ■«■¥■.■ 


■ H! I 4* ■ + ■ 


诒本场 0 的，光仍 Z5% 0 舍，屢玫则子立货后本次报 


■ VITITIVI 


R - V F T V 


价在 60 天内有敌。 


■ »■»■»■ 




I V ■ V ■ 


■ VHV94I VIVIVIVB 


丨_ I 響 ■ 響■琴 ■ 


这一魚 《常重 龙《 


列出服 务鸟费 
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Web 设计这一行 


Trilobitepodcast ： 新祧战 

等待 Trilobite Labs 对于报价的回应期间，他们的 CEO 打来一个电 
话。在几天前的午餐上, TdlobUe 又想在网站上加人新 技术 : podcasting 
(播客>。 Trilobite 打算开设正式的公司 podcast ， 传播内容是开 
发 iPhone 与 iPod Touch 所用程序的复杂技术。现在你要负说想出 podcast 该 
如何加入报价单里。 

但是有点困难》 Trilobite 对于保护自己的 podcast 非常担心„他们希望大 
家能免费下载 podcast (并与任 H 人分 窣）， 但是他们不希塱其他网站拿 
走 podcast 再销售你要处理这个问题以及其他与网站相关的设计议题。 

皋用 Creative Cowwows 为作品梭杈 

著作权法很复杂（还记得 Foo Bar 偷窃我们设计的案例吗？）。通常，艺术 
家、制作人、作家、发明家、音乐家们只是想说明自己的作品可以如何再被 
其他人利用，但不打筇涉人传统菩作权张牙舞爪的领域，他们应该怎么说？ 
此时，我们可以用 Creative Commons (知 i 只共 享）。 



打筘把公司的 
podcastj ： tTune 

State ^ 


Creative Commons ( http :// creativecommons . org /) 是个非费利组织，致力■丁•扩 
大创意工作成采的可取用范围，让作者以外的人也能合法地利用与分享作者 
的创意成果。他们开发了一系列简單的箸作权条款，保护创 意工作 者的“驻 
本权利 ”， Creative Commons 授权已经成为时下媒体产制的巨大力 I 


Ctefttiufi C ⑽州时 5 由麻省 S 

呛钸鸟斯 tS 福太 学的学 
老、家子 200 Z 年釗垚。 




細脑 


著作权造成的问题比我们能想象的还多，你能从过去一年的工作中， 
想到至少三项希望拥有著作权保护的作品吗？ 


目前位置 ► 433 











Creative commons 

Creative Commons 授杈 

M % (Attribution ( by )) 


沒有 Common $ 


(http //c'ieaii^ecommo^. ot^/ 



这项授权允许其他人发布、再混合 Uemix) 、改变原本著作以及稂据本著 
作衍生创作，甚至可以商业性使用，只要标明原著怍者的姓名。这是最常采 
用的授权条款，依据署名授扠条款 （Attribmbn) 所规 定的其 他人可以处理 
你的菩作的方式。 



荖名一相 © 方式共客 (Attribution Share Alike (by-sa)) 

这项授权 允昨其 他人再混合、改变原本著作以及根据本著作衍生创作，茌至 
可以商业性使用，但必须按照你所指定的方式，在他们的新箸作上署上你的 
姓名。这项授权经常与开源软件授权比较。所冇根据你的箸作而产生的作品 
均承跋相同授权，所以任何衍生茗作也能允许商业性使用。 



薯名一禁止演绎 (Attribution No derivatives ( by - ltd )) 

这项授权允许再发布，无论是商业性或非商业性使用，只耍并未改变本著作 
并完被传递并署上你的姓名。 



署名一非葙让性值用 (AttributionNon-eowwercta! (by-nc)) 

这项授权允 i 午其他人洱混合、改变原本著作以及根据本著作衍也创作，非商 
业性使用，虽然他们的新著作必须署上你的姓名 a 非商业性使用，但他们的 
衍生著作不必采用相同授权4 



荖名一胙商让性使用一相同方式共客 (AttributionNoH-cowwerclalShareAEike (by-nt-sa)) 


这项授权允许其他人再混合，改变原本著作以及根据本著作衍生创作，非商 
业性使用，只要他们署上你的姓名并根据相同条款授权新著作。其他人可以 
依据 by-nc-w 杂款规定下载并再发布你的著作，但他们也可以转译、制作再 
溫合著作，并根据你的著作产制衍生荖作。所有据此衍生的新著作将携带相 
同授权，所以任何衍生著作也将逛非商业性的。 



荖名一非畜让性使用一禁止演绎 (AttribufioM NoH-cowmerelal No derivatives (by-ne-nd)) 


这项授权是六种主要授扠杂款中限制最多的条款，允许再发布。这项授权通 
常称为“免费广告” {free advertising) 授权，因为它允许其他人下栽并分卓 
你的著作,只要署上你的姓名并链接回到你的地方，不过他(门不能以任何方 
式改变你的荖作或商业性使用^ 




© 
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Web 设计这一行 



根据以下需求，选择最适合 Triiobite podcast 的 Creative Commons 授权 s 




o 


Triiobite 希望任何人都能下栽、复制、发布及传搐他们的 podcast 


❹ 


Triiobite 希望确定每次 podcast 被复制、发布或传播时会暑上公司的名称 


❺ 


Trilobhe 希望确定 podcast 不被 改变， 编辑或以任何方式破坏，还有发布或 
传播 podcast 时.需忠实地逐字传达，请不要任意剪接！ 


❹ 

it ® 洼符合 lzdobite 
p oicast 電求的撞枝 

神炎。 ' 


Triiobite 希望确定 podcast 的发布或传播并非商业原因（例如说 t 任何第 
三方团体均不能通过转卖 podcast 而获利 ） a 




①⑨ 


① 



① 


①® © 




0 © 
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使用 IE 确的授权 



9 瘅蘚苓 


你选择了哪项授权？是否完全符合以下四项标准? 


Q Trilobite 希望任何人都能下载、复制、发布与传播他们的 podeasi . 




CDJMmOhS 



甚完荚 的送择.光 
苒基在钱发4肉容 
fl 罌备深溼釉虑的 




①⑨ 


Trilobitc 希望确定每次 podcast 被复制，发布或传播时会署上公司的名称 5 


Trilobiw 希望确定 podcast 不被改变、编辑或以任何方式破坏，还有发布或 
传播 podcast 时，需忠实地遂字传达。请不要任意剪接！ 


Trilobite 希望确定 podcast 的发布或传播并非商业原因（例如说，没有第 
三方团体能通过枯卖 podcast 而获利）。 


6 广邮 儿呼芍 行， (St 

无许好磕揉荖作.这不 
/T\ /Tv * h 祕 te 希望看钊的 

C £) ⑤时 




著名 一砟® 让性使用一禁 J ： 演绛撞权 
实襄符含 padc ^ t 的龙求。 



①®@ 

①® 
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你的工具箱 



你的 Web 役计工異箱 


到了这个时候，你所学的一切应该带入生 
活中。停止阅读。不过还是要先把复习要 


点看完，然后停止阅读。等一下，或许把附录 


看完更好 


……无论如何，你是一名 Web 设计师了！放下本书，开 
始设计》制作出美观大方.可访问、容易使用的网站。 
万维网很需要它们， 


复习要点 - 

■ 任何原创作品（设计、代 码等） 都有著作 
权~~■无论你是否放上著作权声明。 

■ 通过礼貌的电子邮件要求撤下具有著作权 
的棄材是个保护自己的著作权的有效方 
! 式 u 

■ 发展与表现你的专业认知，并强调这种认 
知^对于成为一名成功的 Web 工作者非常 
重要 t 

■ 独资企业、 LLC 与法人团体都是企业结 
构，允许各种层次的财务保障并作为营运 
企业的框架 u 


■ 提出新工作的报价时，先做点准备工作9 
确定你的报价合理，别因为没有自信而低 
估自己应得的报酬。 

■ Web 设计师的时薪范围可能从小型市场的 
毎小时50美元到大型公司的大型项目的毎 
小时200美元 0 

■ 请确认你和客户都清楚知道彼此的期望， 
长期而言会省去许多麻烦。 

m Creative Commons 授权是一种传达自己希 
望著作如何被他人使用的方式， 
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附录: 


遗珠么憾 I 


命 



我们真的讨论了很多主题 。 事怙是这样的，还有些觅要的话题与花絮不太适合 
放人前[酎的任何: fiVM & 我们非常确信而人为一定要稍微提及这些话题，否刖 
本书将不够称职， T 是出现了这一章。呃，不笕一敢，其实更像是附录（好啦 t 
就足附录）。但这篇附录的内容足不容错过的十大遗珠之憾。 


进入新章节 439 












语言与文化 


跨文化鸟眵际性的设 i 十 

网络确实已成为全球性的场所*^这表示网站也必须顺应潮流。来自地球 
各个角落的人们正在浏览你的网站。毎个人都有不同的文化、语言与种族 
背景——这些都可能影响他们如何解读网站的设计 o 当你的设计目标足国 
际市场的（或是文化背景不同的）受众时，有些事你应该 E 住。 


©标 有不同的文化宫义 

图标很棒，而且能在非常小的空间里传达很多信总。但图标带给你的意义 
很可能在另一个国家或另一种文化中完全不同。 









在符多其他®家蜜，消 f 老 t ) 行瑰带钧物狻 
/辦以一个^ 里拓砟瘦 M 或 许甚更泠含这 


的 IT eb 噏。 


不商语言的丈孪长 玟不一 桴 


如果你把网站内容翻译成许多不同的语言——本地化 （ localization >过程, 
你会发现文字占用了更多空间。请看； 


英 i 

"Click here for current site news , 

^Klicken Sic hier fur gcgcnwartige Aufstcllungsartnachrichten ," 
mejiKHWTe 3flecb finn b acrojimee speMfl eecTOHKM Mecia 



丈字（妥嵙铰 
i % % 奂克兰诘咢） 


如果网站原本以英文设计，然后翻译为德文，你会发现句子占用了更多空 
间——原本精心编排的设计变得一闭糟 g 有什么应对方式吗？此时需把网 
站版而设计成不受字符数蛰增加的影响，或者耑在内容翻译为行标文字后 
调整版面格式。无论使用哪一种方式，如果要翻译你的网站，就不能忽视 
语言文字的长度要尜 6 
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遗珠之憾 


那是指 ra 份还是年份? 


即使 是显示 R 期与时间这种简取的事，也可能因不同_家而有差别。如果在某个国 
家或文化中、网站的 pi 期或时间格式不正确，你的用户可能会觉得很夼怪，茌至可 
能错过爪要亊件或截止日以下提供几种各位或阵会考虑的 H 期与时间格式： 


20 (0 年5艽40, S 
4 20 f0 年4月50 ? 


4/5/2010 



焱異®，呆用“0 /月/年”的烙式， 
任存大多數萁戗地汸则采用 H B /^)/ 
年，. 的格戎。 

存 fit 洲. 24*)_的斛的报时格 


3:25pm 

〜 真©的狼的格式光 uo •吋制 。 


式砟常普邊。 

15:29pm 


你碥定 M 要用 ©旗？ 

经常见到国旗图标川于代表语言的选择。英语可能用英国国旗 (Union Jack ) 表示, 
法语则以法国国旗表示9可问题是，国箱 <与闹旗）不能代表语言。冇许多不住在 
法国的人在使用法语。所以有呰用户或许会对你的网站把他们的母语等同干其他国 
家而觉得央望，驻至觉得受到孤立，与其使用国旗表示语言选择，不如直接以该语 
言拼写丧示 - English 、 Francais 、 Deutsche 等 


欧 S 的旗佐代表付么?播语, 
语， ® 班牙诘、耷萄耷读，荚 
读、 畚大利領，玻呈语.棼兰 





安奵奄 ff 种啻方播言—在作 
(§ 旗代表鄉—神『 


\ 加貪大图魂衫英该 ㈣ ？这游 
^老都&加拿大的官方读言。 


啷一®图葙钱代契讀？ 世 f 土有 
许多®索的亩古诘言甚英 H 
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V ^ eb 标沱的来來 


网络一直在演变 ， World Wide Web Consortium ( W 3 C ) 负赉建议、开发、 
实现新的标记与样式规范——这些都会影响 Web 设计师的工作方式。最值得 
的注意的就是 HTML 5与 XHTML 2 a 


HTML 5与 XHTML 2 

HTML 5与 XHTML 2都是 W 3 CIE 在开发的规范，这一点经常造成困惑，因为大多数人 
以为 XHTML 1. x 足 HTML 4.0! 的后继版本（而且以为 HTML 事实上已经死 了）。 究竟 
XHTML 2与 HTML 5有什么区别？ XHTML 2差不多就是 XHTML 1. x 的后继版本——设计 
目的是成为网络的一般用途的标记语言，具备最低限度的默认功能，但这些功能可轻易通 
过 CSS 与其他技术来扩展 。 XHTML 2工作小组敁见要的目标是进一步从文档的呈现方式中 
分隔出文档内容与结构。因此， XHTML 2 工作小组已经完全移除 basefont 、 big 、 font , 
s . strike 、 tt 、 u , small , b , i . hr 等元也 XHTML 2 小组也较不关心向下兼容性, 
丢弃了一些出现在早期 HTML 中的文法包袱。得到的是更干净、更精准的语宫……但无法与 
早期 HTML (与 XHTML ) 网页一起运作。 

HTML 5 则采用另一种较为激进的方式^ HTML 5 不打算成为网络标记语言（即为前一 
ft HTML 4) ,而是打算离开文挡标记并创建一个网络应用程序 专厲语 言^所以 HTML 5规 
范聚焦于创建更稳固、功能更齐全的客户端环境，用千网络应用程序的开发，实现方式 
则是通过提供 I 午多 API (以及专门和这些 API — 起运作的元素 ） 。例如 2 D 绘图的 API 可 
与 canvas 元素 一 起运作，播放视频及音频的 API 则可与新设置的 video 或 audio 元素一起 
运作。 

在许多 i ± 人期待的 HTML 5 U XHTML 2共有特色中，尤其要注意导航列表 5 XHTML 2中的 
导肮列表如下 所示： 


<nl> 



吳軚值用新的允景杉荃。 


<label>Category</label 



<li href: 


ir /U 




tttttT Ubei ⑽繼 


<li href= , ynews / ">News</li> 

<li href 二 "/videos">Vicleos</li> 
<li href =// /image5 y, >Images</li> 


</nl> 




ti 尤棄用子籽记链孩 a a 

有在任何? t # 中使用属伐釗澧赵链趙 
6^锌九 


网络的演变 
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遗珠之憾 


HTML 5的导航列表则如下 所示: 


<nav> 



HTWlt 5 引入新的 tmv 无棄用子遵异权列表 


<hl>Category</hl> 

<ul> 

<lixa href-V^>All</a></li> 

<li><a href=Vnews' / >News</a></li> 

<li><a href="/videos">Videos</a></li> 

<li><a href- , Yiittages jr/ >Images</a></Xi> 

係 gfl , 时 u 列表元景 . M 

以它不秸 S 戏笆舍用子 il 轼组鈣 


</ul> 

</nav> 




-股朽 表衧记耷 O 用 
子 &) 逮為权列表； 9 


导肮列表的觅点 （尤 其是 XHTML 2) 是创边简单、好便，又可使用 
css 加上样式的导航标记。 

何时上市？ 

W 3 C 尚未£式发布 XHTML 2或 HTML 5 (但已经公布了两者的规范草 
稿与逑议 ） o 到眩何时会符到£式发布的版本？说真的，+知迠。因 
为这类规范的开发具苻开放性与合作的本质，来自每个工作小组成员 
的 m 仑与协 汶会一盘持续到工作完成，而且梅个人邯有帆会贡献 6 整 
体而宵，扯终定案规范的发布不是问题。 蜇点在 干浏览器何时（以及 
多快）能完金适应新标准。 


兵 fHTMW 规沲 的走整梗槐， 

%奪卷 http : // 咖 w _ w3. o^/htmt/^ / 
htmtS /。 • 

恝猄素 XHTIV 1 L 2的棵恝.硝卷 

htt Pr / / WWMI. w3 , 0^§/ TR / ichtwtZ /\ 


菩户< 



Red 
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css 的进展 


^ CSS 的丰采 

就像 HTML 与 XHTML , CSS 也在向前迈进。从 Web 设计的观点卷来， XHTML 2与 
HTML 5 已经很榨了， CSS 3 (CSS 的新版本）则为此锦上添花。关于 CSS 3琨有趣 
的事情就是它将发布一系列模块^不是一次大型的公开发布这表示 CSS 可以更 
新得更快，因为模块可以单独推出。模块也可以独立修改与更新，不依赖其他校块， 
所以不用等待下次 CSS w 大”改版就能取得你所客爱的模块的更新。 

在众多很棒的模块里，最酷的是多栏校块。其中提供新的 CSS 特性，能让设计师指 
定元素的栏数。这样不仅能让设计师创逮更接近印刷媒体外观的文档，还彻底改变 
创建多栏式布局的方式 6 


多栏模块包括下列 CSS 新特性: 


■ column - count 决定元素内容流 w column - gap 设定栏与栏之间 


动的栏数。 


的间距。 


兵子 CSS 3栈玦的劣 
整梗柢，硝卷 Attp :// 

扣姒 扣， 疚人 


屬 column - width 说明每一^的 


column - ruie 定义栏与栏之间 



宽度 


的框线。 




<div id="entry"> 

<p>* • *</p> 

< p >, x / p > 



</div> 碲着这个 HTML £ 本 



#entry { 

column-connt:2; ‘ 

> ^ 
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针对移动役备迸行设 i 十 

在过去儿年里，为移动设咎进行设计也变得非常热门。全新的移动网络芘 
础设施上线后使得数据传输速度更快，还有佥新而且功能更强的设备问市， 
并且变得广泛适用及被采用4 



V 如采用 C^oo^U Android 系统的电该, 

或 Apple tfy iPhone m 部变了移功网 
络的©枝。 


如果你真在为移动设饬进行设计，有些你应该知道 的事: 





即使I午多移动设备有缩放和浏览的功能1仍然耑要记住，目标设街的屏 
稀比你 平 常习惯使用的小了很多^虽然规格不同.但移动设备的屏嵇空 
间通常是320 x 240,结果 就是， 我们在设计版面时必须非常节俭……真 
的没有太多屏孫空间可用。 

许 多运营商仍然根据用户的手机收到的数据遗来收费。表示我们需要创 
&非常轻巧的网页。除此之外,移动连接 (mobile connectivity ) 还是比 
我们平时通过桌上型或笔记本电脑上网的速度慢了不少 & 网页越小，下 
栽速度越快 5 

除了这 些，诒尽罱多地在不同的移动设备上测试你的设计（或在目标设 
格——使用受众调査而找出的设备上测 试）。 



、 . 

的 - handheld _ 

役0钧页格 
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创建网络应用程序 


巧孖窟 B 络瘅阴程序 


网络已经发展到一定程度， U : 我们不只能创建网页，还能创迆 网络应用程序 （web 
application ) __行为（在某些方面）就像见而应用程序的网站。这些网络应用程序不只 
黾现馆总， 还会苏 的做些事。 

耍创边 N 络应川程序，你需要使用服务器端的脚本语言或编程语言。常见选择包括 PHP 、 
Ruby on Rails , Peri 或 ASP . NET 。 每种语言都有自己的强项与短处,稍加研究,你就能找 
出满足你需求的语言^你选择的语言由 M 络应用程汴所往的服务器决定。请记住，某些服 
务器只女持一种网络语言，但不支持其他。 


还冇，也淸记得使用良好的设计准则， M 然你 或许耍 编苟网络应用程序的代码。以下是儿 
氺开始设 L 十网络应用程序的参考书： 



' Head First 

PHP£MySQL I 
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# 0 布爲齣节奏 


节奏 ( rhythm ) 一- -设计元素的重笈,是印刷媒体设计所用的名词。但别以为节奏只是印 
刷媒沐的亊……它在5维 m I :也 m 朮 m 上我们创达一致性，对千布 w 逻辑有所贡 
献。-个常虬元尜或主题，然后用户会觉得你的网站很^观 t uf 用性豇强，而 II 合理。 

我们肴看如何利用重 紅: 




辦布 泛字却 有轮廊 猓该. 较■)，的 
内容杉趑也一样，这祥含釗迖_ 
神浼梯设符的爷泰 & 


否头的访杀祥式保 ©僉问 
培重1。 



H m § c *tr? 


㈣ 铲 


5 段内宕郄值用徇同的铥 

构，釗送？闷否南下的的 
f 奚4 & 


fS fi 笮扣 










^SSSm ■ 


制楛无黃采用不 f 
同外 t 多 I 5 务 


dfcary rood Lay the paa reaves of b^w^er-5{icof < tMs, iroompatibie OO^t, and 


LKe^iriQ 


c^r%. d."<j 

NHjCWt 


Ciroi^r. 05 


To^Yh 代 ifius ； d<w !ht miftd (Hit practices cnti^prwnC Ka? cwn 3c#^rwwJ thanks to the 
c* Poikli^ the Hf3C Ehe rn^yot cm?j'cxs 


to Ofxt on l!hc I.mp0tflar< 0^ CT>C 

u« the IQ br J tj! TIC-horded -r nc^ i 


/ CT>C fnaacri &c^»f 


The av Zefl GafOim b^!« ^ou to f 
to ice with <lainty Sjeam to use tN 
la^Non 0PCOmr onr wiTN the wr^. 


Thett ^ 
trA&Jt, 


-i nc*d ?etf CSSSo be U^ef 1 - wfiou^ b/g^ap^rc-ae^LStt The Garden iLms to ooSe, | 
jrcJ encQjage parthO£M!5or：. To be^.r, werf some orf tfc cjo'stmg dcs^ns m Ihe “st ， G<k：ng 
阶 a.fy one wJI k»d the style sheet into ^f> {u^c The cotie remans the same, the on*v tKng 
that rjs is L 1 ^ 『■> Vet. <co?Jv 


CSS *Ekiw$ oyn^cte total Gy^cA over the styic o# a hyperteji doajrtent The <¥V> i«jy tUn c*n 
be fn i wjv that pccp*c ootc^ rt by ^nw^tr^ng wffut *t, «n Vuty be, once 

f^irrt a ^ p^io^d iji tiv ha/Ktt d ttw? abie to crtals b^autv ctfuAwt, To dat#, «Mt 
o/ r*at ti^cks jnd h*daha^? <iemoai ； iT»t^ tjy 议 ructwnt% -and codcrv Drt*gncn Ksvt ytt to 
rr-ik<? thc^r rn^Pk, hi rtWd* tO . 


3 E 
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用 css 形成更好的输出效果 

并7文孪对比 

在菹 7 竞，我们讨论过关于内容更易扫读的议题。但易扫谈的文字不 
一定是易辨识的文字。易辨识的文字逛因为色彩与对比而读起来舒服 
的文字，并不是是否容易理解。 

有许多方法可以协助文字更容易辨识。最 3 K 要的一项，确认文字色彩 
与背说&彩有很大差別。如果两者没有足够的差别比，用户会觉得你 
的文宇难以阅读。 


I It the poicntiul [he \vtl> in deliver tnil sculc 

MppIic.iUiins dh\ni hii the m^instiv：itn iil! (\L 4 k 
immducctl (ini ill I, tjuickly \nWt~ iww\ liy ( n a M.ips, 
wxh IxiSLt! with rich user intcrhiccs 

■inti V( ak nt intt, rac(i\ ity 1 he o ilkcttuti ot' 

tcchnolt usl(I In (longli \v,\^ chn^icncti AJAX, in 
a stinnial css.w In | ： mK> (!：tnL m "t wvh design 

d 4 " b ■ 

firm Ad;ipis \ PmU. 





© 






Tlie bursting of the dot-com bubble in the fall of 
2001 marked a turning point for the web. Many 
people concluded that the web was overhyped, when, 
in fact, bubbles and consequent shakeouts appear to 
be a common feature of all technological revolutions. 
Shakeouts typical^，mark the point at which an 
ascendant technology is ready to take its place at 
center stage. 
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H 键狻鸟其指尚 R 荧的名称相符 

如同我们在第6帝讨论的内容，“路标” ( signposting ) 是可用性与直觉导肮设计的 
引导方针之一。存许多方式能让用户淸楚知道自己所在的位置、可以前往的地方以 
及确定他们來到正确的地方 & 其中最简单的-项技巧足让链接与 S 标网页的标题名 
称相符。这样，用户会立即知逬自 己点由 链接时想去的地方。 



Sim pie Bits 


Haad^iafted pixels & texL 

Is ft ll 咚 defljp‘tudLa fcn 

bla.ccmyQhlm/ 

WivboudhiMuAK&uufttt. „ 


r C HKT ItfOTfimDOK AltTICLtl */^ 1 Ql ? I 



磕竑島 e 杉肩 ㈣ 





ATi：%T t r^Tt HIrD 


JtL Bl 


(R>D WORK / ^ 

la^cr ~ 

^ StmptcMti - T-Shlfti 、 


链趙鸟 0 杉两页的 
核逛名#相符 D 


Imcmi£n9 Cunu ， Board Cinws with lyndu^em OnUM T>- 


SimpleBits 


mi n i 


H'MrawTpTwS Jinett qi^aHty. 


You Uk« lo w»r stuff. You tf^o/Smple&lu. Novr^otiun osmbliv ih« rwt>by 

purc^using hand-cnftfd thrf 


Chuiiky I cor^ T-Shirt 



fTJOft Vlc *1 


iC0h» ff Orrt k.M&hOp^c'i CJiinwIeon thunky *^1 
*JJ up iftd primed on vi "Afffiv' Amtfkart 
■Aj^pvel t«, TNi ii4 mitnb^rt%f^d 

thefinntqiM^, d^thc teoni 
m«nT 物良 wcVc iurt ycw/iS tWrrkof Mmcth^. 
Snult lo^o rvwk^riA^td^rt uh< 叫 ‘ 科味」 

■o tOOSffiK jcrtty conon from Appa/ci - 

tong »nfo Mm aa iA*tf rtm 

O SCiirf C.0l4i , . Army 
Q i-cotor icrw^ prkn«4 

<f ha^rpfeiltd CArd ajyd (HKk^rf 


Prtcc: StS 


Shin Sin; 

ShlpptAff ^ USAOf OrudA ： Add %4 flsiOisi 
广 Evervwlvne ei»: Add la {Air 


t3 ▼ l> SQ t Cooq 



OR111.K1KG IVrOI^MAT |DN 

PirJT^nsli Arc prcKctied ‘ 

rfrtfnbtni-h^ tl / required 10 jn 

Pk 4 i 奇 * *llOwibMJVl I wr(V for MV 

Jfid l ~-3 WR^ki fen tvwvw+wr* 




OIKrHOdtCTS 




k«nyi 4 pp« 

SirnpJf It1t£c k: o<ns yo. 

j-ihint 

HirtO t^T f 4 dI. 


VGWt TIIX ： PLANIiT 


SIMf ZOM. Vm 故 BiO ^u) |>c?rt J 

*f I5f f6r TT*« 

PUivn ： of buiu^m^i 

conminfd v> ih 耆硭 

^ J to CrtJl , 矗 hc^lThitr 

pliw. Mmb«rt ifwlT 

peipcmifijfcJTif m ina dfpsn4«ncf w a 

tewirpTinwnl 4 知匆 n 財 JLt k4$1 l 嘁 
af tfs* i-r An^u^J i^Je% (A erwiFonTTwntil 
Of 州 |£#冰的 i^r iAMdc. 
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更美观的博客 

^ 9 ：对 fcfc 是布爲策畴的基础 

对比不 汉可应 用到文字和背逬色彩上 & 对比 （contrast) 更广义的解释足不 
相似图形元素的并列。听起來很玄，但婭井不难理解。 

对比经常用于突显布砑上强调的部分。概念很 简敢： 设计元尜与周边环境 
的差异越强，该项元尜看起得越明显 3 在布局的情境中，通常存两种创逑 
对比的审物；色彩与容器 (container) ,当你把网页元素放在容器中（插 
囹编号、栏、窗 n 等），元索就会从附近的环境中突显出来。所以对元素 
及丼周围事物运用对比色彩时，元索会被突 SL 

我们可以使用对比來沾晰地识别布局的不同部分，或是 ih 用户的视线聚焦 
于布局中特别 m 要的方面。 


宕器鸟笆衫茚用子终找阿玷的夯分 


Q 












H^IIT 


L»ln 4 



/j 


PtQlo 


fj- 1 ^ 


毯彩与窖器郐也用卢的從线寒後子网玷 
的 f 銮简介信总 & 



IT _ ta 刊这 M virit la* w« 奶 out Pw Ml by Ie« iinv^ Yfeu nwy lm la rtfiNiit 

w 脚 <t Adt ivgWfr 时 abort to cmoM T 。《 t«t viMig 嘱 wgli^ t#«a trm lew m 辨 _ 

mrnm^auntMm 

KI(fI^I>J4 1 UK A^, fH XI TtH>,VV ： 




\t u** A Vpda TtJ 






^tiFirlcvtifni/ drvrf Jjfr 


UnlcHml 




Fnu^ i' <" Opt i jti 


重曩砟分， 




M C-A 取 # W W 

F c j ?? 







的此逄 fl ： 用户的说线殓意重屢 
的衧€。 
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更多 设计工 異 

有许多在线与离线工具能协助设计的想象、创建与实现。我们并不是指 Dremnweaver 之类的所见即所得祿 
记编辑器，而是在说确实对设计过程存帮助的工典。我们已经讨论过 Ku[ er (—个很棒的在线配色方案创 
纽程序），但还有很多。以下列举出一些不错的程序： 


Pencil 是个强大到不可思议的开源应用程序，针对分镜表4界面原 

型与设计阁的创建而设计，它有两种版本： Fircfox 的附加组件 （ add ¬ 
on ) 与從酣应用程序（只限 Windows 与 Linux 平台，不好意思，还没 
冇 Mac 版>。老实说， Pendl 差不多就是图片编辑软件，只不过具冇 
专门针对界面设计与原型创违的功能（例如内罝的 GUI 模 板）。 最好 
的一点，它完全免费。 http :// www , evoIus * vn / pencil / 



\i 


|4- 










WHteMaps 足建立佶总架构图的网络应用程序，而且还能与 
其他人共享或合作编辑 IA 图和 Pencil ■样， WriteMaps 也是 
免费亂 http :// writemaps . com / 



Web Developer 是 Firefox 的附加组件，在我们触手可及的地方 
加人了网站开发的主机与测试工具。有了它，你可以直接编辑目前 
所示网页的 CSS, 拫据媒体类型 （media type) 呈现网站的所有样式 
标出网页上所有块级元素的轮廊，自动调整浏览器窗口的大小. 
直接编辑目前所示网页的标记。 http :// chrispederick . com / work / web - 
developer / 




CHltblc 


Dtiplay CSS MedEa Type ► 

VkwCS$ 

*coc 

Ifltw Style InfomutEon 

HOY 

Add lji#r Style Sh(« m 


EdEl CSS 

K0£ 

Uie Sordtr Sax Modrl 



CSSTidy 是开源的枭面应用程序（有 Windows , Linux 、 Mac 版），能解析与优化 CSS , 它可以轻易地 

减少 2 5%的 CSS —— 对于执狯于优化的人或若为特別需要小文阼的平台（如移动设备）进行设计时，特 
别好用 。 http :// csstidy . sourceforge . net / 


Firebug 是开源(且免费的> Firefox 附加组件,和 Web Developer 一 
样，在我们触手可及的地方加入了丰富的网站设计、开发与测试工具。 
有了它，我们能检笠及编钳标记与 CSS, 査看某个网页里的各种 CSS 容 
器 (box model) ,根据文件类型分别査看网页的响应时间（下载时 
间），即时地调试与执行 JavaScript， 还可査 ■JavaScript (及许多其他 
芈物 > 的性能。 http :// getfirebug . com / 



目前位罝 ► 451 






























网站设计 


你将从本书学到仔么？ 


你曾经希 M 看卷屮：；就能学到苒正的网站设计吗？竹经想过该如何同时达成 U : 
网站看起来美观，又能存效率地沟通信息,还要通过可访问性与可用性的策略 
吗？ 

《深人浅出 Web 设计》 正是精通上述主题的秘笈。我们将学到如何设计一个 
绝佳、用户友好的 网站， 上谈客户需求，1、_说手绘分镜表，乃免完成在线所 
需的 HTML 与 CSS 生文件1而且会个典正可以运作的网站！ 


f 逢用卡片分类 
法， 速 EJA © 


僅用笆給.陔明他 
違垚纪色方 f , 


C 





VI 如 


t. .—. 

.—广 —- j —厂 二 


用的柒輩 
f SE 识网玷 。 


VHte 



砼軔分 fl 表 ，查 
寿网站 I 玆存属 
单 X •的楫孑。 



f 习#舍比例笱 
句钱建主哆 B * 看 
7舒双的沔玷。 


为何本帛最上去如此不阏？ 

各位的时问都很宝贲，不值得拿来与新观念榑斗 9 所以我们根据烺新的认知 
科学与学习理论，设计出•装复合感官学习体验。《深人浅出 Web 设计》使 
用丰當措美且符合大脑运作方式的视觉设计，帮助各位吸收知识，而不是以 
焯 m 的文字催促各位入眠。 
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简洁.但绝非过度简化。 
实用. 而又直观。真希望 
在我踏入这行时，能看到 
类似这样的书籍。” 

iVlau DiGangi ， 

现劣生话的网站设汁师 

开发人员终于能够全盘理 
解 4 好’网站的整套建设 
过程 6 我们终于在网站 
设计必要准则的领域，看 
到一本必需而且让人想拥 
有的书。” 

- Johannes de Jong , 

Web 稅序设 I 卜师 


篇 nnr 





































































































